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:

• Chingu: Voyage Guide
• Chingu: Voyage 50 - Tier 3 Project Requirements and Specifications

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.

• Project Summary
• Components
• Overall Website Design

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

  {
    "username": "testuser",
    "email": "[email protected]",
    "password": "testpassword",
    "confirmPassword": "testpassword",
    *"firstName": "test",*
    *"lastName": "test",*
    *"contact": "1234567890"*
  }

• Login: /auth/login - POST - raw/json data

  {
    "username": "testuser", // or "email": "[email protected]"
    "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

  {
    "email": "[email protected]"
  }

• Reset link: /resetpassword/reset-link/{token} - GET
  • it will redirect to the reset password page
• Reset Password: /resetpassword/reset-password - POST - raw/json data

  {
  "password": "newpassword123",
  "confirmPassword": "newpassword123"
    }

Profile

• Profile: /api/auth/profile - GET Food Items Search
• Get All: /api/fooditems/items - GET - raw/json data

  {
  "password": "newpassword123",
  "confirmPassword": "newpassword123"
  }

• Update Profile: /api/profile - PUT - raw/json data

  {
  "username": "johndoe",
  "email": "[email protected]",
  "firstName": "John",
  "lastName": "Doe"
  }

Restaurants

• Get all Nearby Restaurants (5km distance): /api/nearbyrestaurants - GET

  {
  "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

  {
    "amount": 50
  }

• Make Payment: /wallets/makePayment - POST - raw/json data

  {
    "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

1. Clone the repository git clone https://github.com/chingu-voyages/v50-tier3-team-21/
2. 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
3. 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.

Technologies Used

Programming Languages

• HTML - Hypertext Markup Language
• CSS - Cascading Style Sheets
• TypeScript was used for frontend
• JavaScript was used for backend

Dependencies and Technologies

Frontend:

• React Frontend framework
• Tailwind CSS framework
• Tailwind-merge - Tailwind utilities
• Vite - Tool for building frontend
• Axios for http requests
• dotenv for environment variables
• Tanstack react query and devtools
• React-Map-GL for interactive maps
• React-Map-GL-Geocoder for address search
• React-Toastify for displaying notifications
• React-Router for declarative routing
• React-Hook-Form for form validation
• Zod for ts data declaration and validation
• clsx clsx for class list
• uuid - for the generation of unique ids
• Mapbox-GL - a JavaScript library for maps
• geoJson - for creating, viewing, and sharing spatial data

Backend:

• NodeJS runtime environment
• Express.js web backend framework
• PostgreSQL database client libraries:
  • pg
  • pg-hstore
• Cookie Parser
• Cors library for cross-origin resource sharing
• JWT - JSON Web Tokens
• Bcrypt password hashing library
• Nodemailer module for email sending
• Sequelize - ORM (Object-Relational Mapping)
• dotenv for environment variables
• EJS - Embedded JavaScript templating
• fs and path modules for file handling
• Swagger UI and Swagger JSDoc for API documentation
• Jest for testing
• Stripe for payment processing

Tools

Hosting Platforms

• Render - Hosting and Live App deployment
• Neon - PostgreSQL database hosting
• GitHub - Source Control hosting and Project management

Development and Design Tools

• Postman - API testing
• Beekeeper Studio - Database testing and accessing
• Visual Studio Code - Develompent code editor
• Microsoft Designer - UI design and prototyping
• Figma - for wireframing and prototyping
• Lucidchart for DB design

Our Team: T-grams

1. Martha Mwangi - GitHub / LinkedIn

• Frontend Developer and Wireframe Designer

2. King Samuel - GitHub / LinkedIn

• Backend Developer

3. Greg Minezzi - GitHub / LinkedIn

• Frontend Developer and Scrum Master

4. Tomislav Dukez (Product Owner) - GitHub / LinkedIn

• Backend Developer and Product Owner

1. Riry Nomenjanahary - GitHub / LinkedIn

• Frontend Developer (Wizard)

6. Albert Ngodi - GitHub / LinkedIn

• Backend Developer

---

© 2024 T-grams - The Hungry Hippo Team. MIT License. All rights reserved