For this lab, we will be reviewing an example of a fullstack website with frontend, backend, and all of the necessary components for a production grade website. This website, called Up and Coming was a final project created in the very first iteration of this course. Here, we have provided is as an example of what a complete website, and a complete final project, should look like.
To install any of these, please visit the documentation.
Cloning the Repository
This project consists of two different repositories. One repository contains the frontend code and the other contains the backend code. For your own project, you may choose to separate frontend and backend into two repositories, or you may use one repository and organize two separate directories in that single repository.
In order to give you access to play around with the code, please fork each repository. To fork, visit the following links:
Fork the repository to your own account. Once it has been forked to your account, clone it to your local machine. The rest of this lab will be completed locally.
This project uses a database to store users. Because it runs the database locally, you must setup the database beforehand in for it to work.
First ensure that you have MongoDB (Community Edition) is installed. Into your terminal, enter the following:
mongo should start up the mongo shell and
use upandcoming will create the
necessary database. If successful, you should see
switched to db upandcoming
To actually start the website, we will be running the frontend and backend in parallel. Because they are built with different softwares, this example runs them as separate entities, accessible via separate ports. Our frontend will literally make HTTP requests to our backend. As such, they must run on separate ports.
For this project, the frontend runs on localhost:3000 and the backend on localhost:3030
To actually spin up, first open a terminal.
cd into the
and into the terminal type
Now, open a new terminal. DO NOT interrupt the previous terminal. Both terminals
must run at the same time.
cd into the
backend respository, and type:
Now, both components should be working correctly.
The premise of this website was to serve as a volunteer social media. Individuals could sign up to volunteer, create and browse events, and keep track of what events they have attended this year. Feel free to play with the website, and ensure that you are continuously looking back at the code to understand what is going on.
- Dhruv Vaish
- Kimberley Fan
- Isabel Zheng
- Anjan Bharadwaj
- Gautam Venkatesh