/MEAN-delivery

Primary LanguageTypeScript

MEAN Delivery

A fake pizza-themed food delivery website where users can order food to their current location.

Screenshot (47)

The backend was built with javascript, node.js, express, mongodb atlas,
bcryptjs to encrypt and decrypt the users' password, colors to make certain console logs pop out, cors tells the browser that the app at its origin has access to resources at another origin, dotenv to keep certain information secret, express-async-handler to handle async express route exceptions, jsonwebtoken to give each user a unique token, and ts-node with typescript.

The frontend utilizes Angular Material with TailwindCss for styling, Google fonts and material icons, leaflet for the map, ngx-toastr for the messages, and paypal to handle payment.

How to run this project

Cloning the Code

  1. Open your terminal and type git clone https://github.com/christiandeandemesa/MEAN-delivery.git
  2. To download the backend dependencies, cd into the server folder and type npm install.
  3. To download the frontend dependencies, cd into the client folder and type npm install.

Connecting to MongoDB

  1. Create an account or login to MongoDB Atlas.
  2. Click New Project, name your project, click Next, then Create Project.

mongo-1 mongo-2 mongo-3

  1. Click Build a Database, and choose the free option.

mongo-4 mongo-5

  1. Leave AWS as the Cloud Provider & Region, the region closest to where you are, and click Create Cluster.

mongo-6

  1. Type in a username and password, click Create User, leave it on My Local Environment, click Add My Current IP Address, then Finish and Close.

mongo-7 mongo-8

  1. Click Connect, Connect your application, then copy the connection string.

mongo-9 mongo-10 mongo-11

  1. Create a .env in your root folder and add the following:
PORT = 5000
MONGO_URI = MongoDB connection string (Note: Don't forget to replace <password> with your password)
JWT_SECRET = Any Text Here

Paypal Client ID

  1. Create an account or login to Paypal.

  2. Click App & Credentials, then Create App. paypal-1

  3. Type an App Name, leave it on Merchant, and click Create App. paypal-2

  4. Change the following in the client's index.html using your Client ID: paypal-3

<script src="https://www.paypal.com/sdk/js?client-id=YOUR CLIENT ID"></script>

Add Food Data

  1. Open a terminal, cd into the server, then type npm start.
  2. Open another terminal, cd into the clinet, then type ng serve -o.
  3. Open a separate browser and type http://localhost:5000/api/foods/seed to seed the sample_foods data.

Features

  • User can register and log in to their account.
  • User can filter all the foods using the search bar.
  • User can filter all the foods using the tags.
  • User can add any food to their cart.
  • User can clear or view the food in their cart.
  • User can change the quantity of any food in their cart.
  • Logged in user can choose their location.
  • Logged in user can pretend to purchase their food using Paypal (Note: If you didn't make a Paypal sandbox account, then use sb-rl1yn25021142@personal.example.com as the email and A90d>Hc< as the password).
  • Logged in user can see their order details after their fake purchase.
  • User can view a pizza loading image while assets are fetched.
  • Responsive web design for all portrait and landscape devices.
  • Browser support for Edge/Internet Explorer.

Upcoming Features

  • Cross browser support for Chrome, Firefox, Opera, and Safari.
  • Logged in user can view, edit, and delete their profile.
  • Frontend security to prevent any user from seeing the order details of other users.

Bugs

  • Loading interceptor will appear behind angular material components.

Author