ProjectUp

01 Background/inspiration:

• Our idea - We were inspired by combining the idea of productivity with the functionality of dating apps
  • What if there was a way to look through nearby projects/activities and express your interest in them?
  • What if a community of students can unite with other students to help facilitate tasks easier in one app?
• Our product - A dating app but for projects/activities rather than dates
  • Restricted to school areas so individuals are serious about the events
  • Post about your activity and let students show their interest through a ✅ or ➖
• Roles:
  • Shamita - Frontend Develepor
  • Carl - Frontend Develepor
  • Jared - Frontend Develepor
  • Osheen - Backend Develepor
  • Jason - Backend Develepor

02 Features we implemented + wanted to implemented

• Create a profile → implemented
• Messaging (stretch goal) → could not implement
• Posting Algorithm → implemented
• Keeping track of likes/dislikes on posts → could not implement
• Resume upload feature → implemented
• View other posts → implemented

03 Design Process

1. Inspiration

• We wanted to go for neutral colors and a minimal UI design to match the modern aesthetic of many social media platforms and to make it easier for students to navigate the app, similar to what we observed in dating apps like Tinder and Bumble.

       

2. Sketching process/Wireframing

• Our main inspiration was the UI of Instagram, which features a minimal aesthetic and a well-organized profile feed and home page. We sketched out Instagram's interface from their computer view as a reference and incorporated that into the design of our app.

       

3. Protoyping/lo-fis

• Our low-fidelity designs were incorporated into our high-fidelity prototypes as we continued discussing design elements during our meetings. However, we realized that many of the designs and features we created would not be feasible given the time constraints. We also noticed that our initial designs did not account for several other features of the app, which led to multiple revisions.

4. final-designs

• These were the final designs we decided to implement for our app, and we revised some of the other design elements as we couldn’t implement every feature we had in mind due to time constraints.

04 Technical Process

• Learning phase -> watching tutorials and online research to get a hang of the tech stack + code syntax
• Notes -> compiling coding notes + sharing in meeting
• Features -> each person working on a different feature and pushing code to their branch

05 Our tech stack

• Figma
• Vite React
• ExpressJS
• Node.js
• MongoDB
• HTML
• CSS
• Javascript

06 Challenges

• Time
• Summer schedules
• School
• Unrealistic Goals for First Web Development Project

07 Reflection

• Make more realistic goals
• Check in with team more
• Communication is very important
• Make project more simple
• Learn the basics

---

💻 MERN stack template

Template for building projects with the MERN (MongoDB, Express, React, Node.js) stack. This template was generated using create-next-app and express-generator for the client and server, respectively.

Prerequisites

• Install Node and npm here
• Install yarn with the command npm install -g yarn
• Set up a MongoDB Atlas instance. See this video for help!
• Create a .env file with a variable called DB_URL and paste your MongoDB url:

DB_URL=mongodb://mongodburl.example.com:portnumber

Running

1. cd into client and run the command yarn install to install all dependencies
2. To start the client, run yarn dev in the same directory
3. In another command window, cd into server and run yarn install and npm start to install all dependencies and start the server.
4. To kill a port, use 'npx kill-port <PORT_NUMBER>'
5. For Linux/Mac use 'sudo lsof' to see what ports are active.
6. For Windows, use 'netstat -a -b'
7. If you want to change the port for server, head to the server/bins/www. Look for the line var port = normalizePort(process.env.PORT || '3001'); Change it to any port you like!
8. Happy hacking!