V50 Tier3 Team 21

#api #expressjs #javascript #jwt #nodejs #postgresql #react #sequelize-orm #stripe #tailwindcss

Demo Download

Hungry Hippo

Link to the Hungry Hippo website

Introduction

Frontend: React, Tailwind, TypeScript
Backend: NodeJS, Express, PostgreSQL, JavaScript

T-grams Development Team presents the Hungry Hippo project. This project is a web application that allows users to order food from the best restaurants in the vicinity and track their order status at affordable delivery prices. It is a Full Stack Web Application made as a part of 50th Voyage organised by Chingu. More about Voyage 50 and the project requirements can be found:

Project Details

Team Documents

In order not to block the creative and innovative work of the project, the team has adopted the idea to use the Google Docs document as a team document in a very free fashion. We were sharing the ideas, adding details and minutes of the meetings in that document that was more of a brainstorming tool. The said document is accessible in the Google Docs.

For the Project Management, the team has used the Github Projects' Kanban Board

Design and Prototyping

The main design and prototyping is done by Figma and the file can be accessed here.

On the other hand, some excerps are exported to the docs folder in pdf format.

Features

User Authentication:
- Sign up, log in, and log out functionalities.
- Password reset
Restaurant Discovery:
- Search for nearby restaurants based on user location.
- Filter restaurants by distance , food price , food categories and country
Food Ordering:
- Browse food items from various restaurants.
- Add items to cart and place orders.
User Profiles:
- Manage personal details and view account balance.
- Update profile information.
Payment Integration:
- Top-up wallet
- make payments for orders.
Food Categories:
- Browse and search food items by categories.
Map Integration:
- Interactive maps to view restaurant locations and delivery areas.
- Address search functionality for delivery.

API

API Endpoints

To access the API endpoints, you can use the following URLs:

local URL: http://localhost:3000/api
deployed URL: https://hungryhippo.onrender.com/api

SwaggerUI Documentation can be found here

Authentication

Signup: /auth/signup` - POST - raw/json data ```json { "username": "testuser", "email": "3JFJt@example.com", "password": "testpassword", "confirmPassword": "testpassword", "firstName": "test", "lastName": "test", "contact": "1234567890" }
Login: /auth/login - POST - raw/json data ```json { "username": "testuser", // or "email": "3JFJt@example.com" "password": "testpassword" }
Logout: /auth/logout - POST
Refresh Token: /api/auth/refresh-token - GET

Reset Password

Reset Password email: /resetpassword/send-password-reset-email - POST - raw/json data ```json { "email": "john.doe@example.com" }
Reset link: /resetpassword/reset-link/{token} - GET
- it will redirect to the reset password page
Reset Password: /resetpassword/reset-password - POST - raw/json data ```json { "password": "newpassword123", "confirmPassword": "newpassword123" }

Profile

Profile: /api/auth/profile - GET Food Items Search
Get All: /api/fooditems/items - GET - raw/json data ```json { "password": "newpassword123", "confirmPassword": "newpassword123" }
Update Profile: /api/profile - PUT - raw/json data ```json { "username": "johndoe", "email": "johndoe@example.com", "firstName": "John", "lastName": "Doe" }

Restaurants

Get all Nearby Restaurants (5km distance): /api/nearbyrestaurants - GET ```json { "longitude": 40.6782, "latitude": -73.9442 }

Orders

Create Order: /order/create-order - POST - raw/json data

{
"deliveryAddress": "whatever4",
"deliveryDate": "2024-08-05",
"deliveryTime": "14:00",
"foodItems": [
  {
    "itemId": "1",
    "quantity": 1
  },
  {
    "itemId": 200,
    "quantity": 5
  },
  {
    "itemId": 4,
    "quantity": 2
  }
  ]
}

Get Order by Id: /order/get-order/{orderId} - GET
Get Orders by User: /order/get-orders - GET
Cancel Order: /order/cancel/{orderId} - PUT - raw/json data

Food Categories

Get all Food Categories: /foodcategories - GET

Food Items

Get Food Items: ?[foodItemId={id}&][categoryId={id}&][restaurantId={id}&country={country string}] - GET

Wallet

Request Account Topup: /wallets/requestAccountTopup - POST - raw/json data ```json { "amount": 50 }
Make Payment: /wallets/makePayment - POST - raw/json data ```json { "amount": 30, "orderId": "order_123456" }
Get Account Details: /wallets - GET

Transactions

Get Transactions: /transactions - GET

Database

PostgreSQL relational database has been chosenfor this project. The database was created using Sequelize ORM and deployed on Neon.

By analyzing the proposed food items API from the deployed API https://menus-api.vercel.app/, we have noticed that only the general list of all food items was obtainable. On the other hand, the repo free-food-menus-api was lacking the geo-coordinates of the food items (restaurants) that were available on the deployed API. Therefore, instead of relying on the deployed API, we have decided to make a seeder script that would populate the database with the output of the deployed API: backend/seeders/API2db.js.

Database Schema Design

Deployment

Deploying on Render

Render was used as the hosting platform for the live project deployment.
- backend: https://hungryhippo.onrender.com/
- frontend: https://hungryhippo-tgrams.onrender.com/

Deploying on local machine

Clone the repository git clone https://github.com/chingu-voyages/v50-tier3-team-21/
Backend
- Install dependencies from the root directory: cd backend && npm install
- add necessary details to .env file, details in env-sample
- if the PostgreSQL database is empty, run npm run seed
- run npm run dev
- open http://localhost:3000 in your browser
Frontend
- Install dependencies from the root directory: cd frontend && npm install
- add necessary details to .env file, details in env-sample
- run npm run dev
- open http://localhost:5173 in your browser

Testing

Some of the automated tests were written in Jest and can be executed with npm run test in backend directory.

Because of the time constraint, and because the developers had decided to work with the tecnologies that weren't used by them before, a lot of time was spent into studying, learning and discussing the solutions and implementing them.

Having all that in mind, the team has decided to implement more tests in the future versions of the app. Nevertheless, the manual tests were performed by the team. Backend functionalities were tested with Postman and Beekeeper Studio, and frontend functionalities were tested with the browsers on various devices.