-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathwendi.html
124 lines (98 loc) · 8.35 KB
/
wendi.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="css/style.css" rel="stylesheet">
<link rel="icon" type="image/x-icon" href="images/websiteLogo.png">
<link href="https://fonts.googleapis.com/css2?family=Lato:wght@400;700&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Oswald:wght@200..700&display=swap" rel="stylesheet">
<title>WENDI (2023)</title>
</head>
<body>
<nav>
<div class="navBar">
<div id="logo">
<h3 style="font-size: 45px;"><a href="index.html">EMMA LIM</a></h3>
<div class="dropdown">
<button class="navButton" onclick="toggleNav()"><img id="mobileNav" src="images/navButton.png" style="width: 50px;"></button>
<div id="dropdownMenu">
<div id="menuItem"><a id="dropdownContent" href="index.html" style="text-decoration:underline;">WORK</a></div>
<div id="menuItem"><a id="dropdownContent" href="about.html">ABOUT</a></div>
<div id="menuItem">
</div>
</div>
</div>
<div id="navItems">
<div id="page"><a href="index.html">WORK</a></div>
<div id="page"><a href="about.html">ABOUT</a></div>
</div>
</div>
</nav>
<main class="content">
<h1 style="text-align:center"><a href="index.html" style="text-decoration:none">← </a>WENDI (2023)</h1>
<div id="projInfo">
<div id="video" style="text-align: center">
<img id="viewImage" src="images/work/wendi/wendiPic2Large.png" alt="WENDI screen displayed on Macbook">
</div>
<h2 class="workHeading">BACKGROUND</h2>
<div class="projDesc">
<div class="projDescCol">
<h4>ROLE</h4>
<p>Full-Stack Developer in a team of 4</p>
</div>
<div class="projDescCol">
<h4>TOOLS</h4>
<p>Python</p>
<p>HTML/CSS</p>
<p>MySQL</p>
<p>Flask</p>
<p>Git</p>
</div>
<div class="projDescCol">
<h4>TIMELINE</h4>
<p>3 months</p>
</div>
</div>
<div class="develop">
<h4>Overview</h4>
<p>The Wellesley Evaluation Network for Dorm Information (WENDI) is a <b>web app designed to streamline the housing selection journey</b>. WENDI facilitates effortless navigation through campus housing options, enhanced by genuine peer reviews and data inputs from fellow students. This tool allows users to report and share insights about the rooms they and their peers have lived in, offering a rich source of real-world data and experiences. Students seeking room insights will find a wealth of information, while those wanting to share experiences have a platform to amplify their voices.</p>
</div>
<div class="develop">
<h4>Problem Statement</h4>
<p>We noticed that the current methods of finding dorm room information are unreliable and there isn't a centralized platform for students to find the information on. The main 2 alternatives are a Google Drive folder which contains outdated and inaccurate dorm building floor plans and asking in Wellesley FAQ, a Facebook group where students can ask about anything Wellesley-related. The Google Drive folder can be difficult to access and parsing through Wellesley FAQ posts is inconvenient and challenging.</p>
</div>
<div class="develop">
<h4>Project Goals</h4>
<p>Our goal was to build a web app that would solve the issue we identified and help future students.</p>
</div>
<h2 class="workHeading">DEVELOPMENT</h2>
<div class="develop">
<h4>Ideation + Prototyping</h4>
<p>Before building our web app, we looked at what dorm information Wellesley FAQ users ask for. This helped us structure our database and narrow down on what features to include. Wellesley FAQ users frequently asked for images of specific dorm rooms and what the living experiences are. We determined what data we would need to collect, then what main features we wanted our app to have. The main features of WENDI are: sign-up/login, writing room reviews, viewing room reviews, viewing rooms by dorm building, and writing comments on room review pages. Building off of our list of features, we identified the different pages we would need to build and created a <a href="https://www.figma.com/file/Bwdu7cNrhcIaypJpehj5yV/WENDI_Design_Wireframe?type=design&node-id=2%3A100&mode=design&t=7Pf3iExgT6rnRfts-1">wireframe of the app</a> to visualize the app's flow.</p>
<div class="projImg">
<img src="images/work/wendi/dbdiagram.png" alt="WENDI ER diagram">
</div>
<p>To understand how we needed to structure our SQL database, we created an ER diagram using dbdiagram.io and then setup our database.</p>
</div>
<div class="develop">
<h4>Coding</h4>
<p>As most of our code was going to be developed asynchronously, we split features amongst team members. <b>My responsibilities within this project</b> included developing SQL queries to display a list of the rooms in a specific dorm building, change the list's display based on filters, and display the reviews and comments made on a room's page. I additionally created the HTML and CSS for the dorm building and room review pages.</p>
<p>Writing the SQL features was helpful in better understanding our database's structure and reinforced my ability to read and write data to a database. I was additionally able to practice building HTML templates and filling them in with database data using Flask.</p>
</div>
<div class="develop">
<h4>Reflection</h4>
<p>All of the features we had planned on implementing for this project were completed and the workflow of this project went fairly smoothly. A few minor challenges we encountered involved accidentally deleting our database and encountering merge conflicts in Github.</p>
<p>When presented to students, we received positive feedback that this is a product our target audience would use if deployed.</p>
<p>Want to see WENDI's code or a demo video of our app? Visit my Github or email me at el110@wellesley.edu!</p>
</div>
</div>
<div class="footer">
<p>Made by Emma Lim.</p>
<a class="social-icons" href="https://www.linkedin.com/in/lim-emma" target="_blank" style="padding-right:10px"><img src="images/footer/linkedin.png" style="max-width: 25px" alt="github"></a>
<a class="social-icons" href="https://github.com/emmalim" target="_blank"><img src="images/footer/github.png" style="max-width: 25px" alt="github"></a>
</div>
</main>
<script src="javascript/portfolio.js"></script>
</body>
</html>