Sonder

Brief Description of Project

A website where users can see locations in a map and how much they cost, and then plan a trip.

Our Tech Stack and Language

We used Flask (python) for back-end and reactJS for front end. We found that it's easier to use a cloud database than a local one, so we chose to use MongoDB.

5 Most Helpful Resources for Getting Started

1. React Tutorial - Learn React - React Crash Course

The is one of the shortest react tutorial out there in the internet. It helps us learn the basic of state vs props, what are components, and the lifecycle of components.

2. JavaScript Tutorial for Beginners: Learn JavaScript in 1 Hour

React is a javascript framework so it's great to understand javascript syntax. Another great thing about this video is that it's fairly new (posted in 2020). Javascript loves to deprecate their function, so even videos that were posted in 2018 are sometimes outdated.

3. Learn ES6 in this free 28-part Scrimba course

We treat this more like a cheatsheet than an actual tutorial. React uses ES6, which is a modified version of javascript. Good to know, but we don't use it as much.

4. Build a Python CRUD REST API in Flask and MongoDB Using Flask-PyMongo Library

5. Postman Tutorial for Beginners: API Testing using Postman

Good for testing out API before you actually write front-end code to manually test it. We didn't know it exists before and found it really difficult to know whether our back-end code was correct.

UML Diagram

Task Flow

To run the app

• yarn install to install frontend dependencies
• pip3 -r requirements.txt to install backend dependencies
• yarn start to start a live webpage
• python3 src/server/app.py to run the backend server