Mark It and Market

UCLA CS 35L Project, Spring 2021, under the supervision of Professor Paul Eggert and our lovely TAs.

A brief introductory presentation can be found here. Note that you need to be signed in with your Google Apps for UCLA Account to be able to view.

Here is a demo video showcasing the features of our project.

Authors:

• Alan Yao
• Annie Liu
• Sumith Nalabolu
• Daniel Liu
• Jonathan Xu
• Leonard Chen

About

With the proliferation of big companies and corporate chains, it can be difficult for local farmers, hobbyists, bakers, etc. to have a reliable way to reach an audience of consumers interested in purchasing their homemade or home-grown goods. This project, a novel web application built using the MERN Stack, aims to alleviate this issue. We aim to connect these local producers with everyday members of the community around them, so that customers can buy locally and support small/home businesses instead of relying on big corporations.

Screenshots

The Home Page: A individual post's page: The submission page to create a posting: The page aggregating all posts, so that you can see which listings are closest to you.

Quick-start

1. Clone this repo by running git clone https://github.com/ViciousCupcake/CS35L-Project.git
2. Create the .env file with all of our secrets, and place it into ./backend/. You may have to source the .env file with . .env.
   • For more info on creating the environment file, see the Environment Variables section
3. Install dependencies for the backend: cd backend; npm install
4. Install dependencies for the frontend: cd frontend; npm install
5. If installing fails due to dependency conflicts, pass --force.
6. Start the backend: cd ../backend; npm start
7. Start the frontend: cd ../frontend; npm start
8. Insert Google Maps API key in GoogleMapsLinker.js
9. Visit the website at localhost:3000

Misc Info:

• Backend by default is hosted at localhost:8000
• Frontend by default is hosted at localhost:3000

Environment Variables

The environment variables should be stored into ./backend/.env. This file should contain 8 entries:

Environment Variable Name	Example	Description	Where you can generate the key
USERNAME	MongoUser1	The Username used by the backend to log into MongoDB	Follow the instructions at https://docs.mongodb.com/guides/cloud/account/
PASSWORD	MongoPswd1	The Password used by the backend to log into MongoDB	Follow the instructions at https://docs.mongodb.com/guides/cloud/account/
DB_LOCATION	cluster5.abcde.mongodb.net	The address that your database is hosted at	Follow the instructions at https://docs.mongodb.com/guides/cloud/account/
API_PORT	8000	The port that the backend will be hosted on	Choose a port number that doesn't conflict with an pre-existing process on your machine
GOOGLE_MAPS_API_KEY	aBcDeFgH12345	The API Key used for Google Maps	Follow the instructions at https://developers.google.com/maps/documentation/javascript/get-api-key
GOOGLE_CLIENT_ID	asdfq273450652393adf;lfasdfkwer.apps.googleusercontent.com	App identifier used in OAuth flow	Set up OAuth in a Google Cloud project
GOOGLE_CLIENT_SECRET	LasdouHgsfgTasdf	Identifier used in OAuth flow to make sure app isn't being impersonated	Set up OAuth in a Google Cloud project
COOKIE_KEY	asdfgkjhsdlkgf;sd	The cookie sent back on requests	Type anything you want

Put these 8 entries into ./backend/.env in the format ENVIRONMENT_VARIABLE=ENVIRONMENT_KEY

For example,

USERNAME=MongoUser1
PASSWORD=MongoPswd1
DB_LOCATION=cluster5.abcde.mongodb.net
API_PORT=8000
GOOGLE_MAPS_API_KEY=aBcDeFgH12345
GOOGLE_CLIENT_ID=asdfq273450652393adf;lfasdfkwer.apps.googleusercontent.com
GOOGLE_CLIENT_SECRET=LasdouHgsfgTasdf
COOKIE_KEY=asdfgkjhsdlkgf;sd

Git How-to Guide:

Cloning A Repo:

1. cd into the folder you want to clone (aka download) this repo to
2. Run the command git clone https://github.com/ViciousCupcake/CS35L-Project.git (Note that you will need git installed on your machine)

Adding Contributions:

1. Make a branch. To make a branch, run git branch [NAME OF THE BRANCH]
2. Type your code/contributions
3. Once your done, you want to stage your changes, by running git add [FILES THAT YOU WANT TO ADD]
4. Make a commit: git commit -m [DESCRIPTION OF YOUR CHANGES]
5. Push these changes to the server: git push origin HEAD
6. Go to GitHub and open a Pull Request.
7. Wait for a code review, and if everything looks good, we'll see your contributions onto the main branch!

Thanks for the help!

Useful commands

• Add every file: git add -A
• Switch between branches: git checkout [NAME OF THE BRANCH]
• Get updates from the server: git pull
• List branches: git branch
• For other commands, reference here

Special Thanks

• Nur Islam's The MERN stack: A complete tutorial (2020) is a well-written tutorial about getting started with the MERN Stack.
• Google's Analytics Platform provides useful tools on collecting real-time analytical data from your users.
• Google's Maps Embed API Documentation provides guidence on how to efficiently get started with the Google Maps API.
• Jan Bodnar's dotenv Tutorial (2020) is a brief tutorial going over what dotenv does and how you can use it in your own applications
• The OpenJS Foundation's Node is a useful JavaScript runtime that powers both the frontend and the backend of this project.
• Rachael Njeri's How to Integrate the Google Maps API into React Applications (2020) is a tutorial going over the basics of using the Google Maps React API.
• Stephen Grider's Node with React: Fullstack Web Development (2021) goes over how to use Passport.js to integrate OAuth login.
• The Mongoose Docs is an essential tool that we used, when trying to tie our backend to communicate to MongoDB.