Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/chingu-voyages/v50-tier3-team-21
React |Tailwind | TypeScript | NodeJS | Express.js | PostgreSQL | JavaScript | Hungry Hippo - Chingu Voyage 50 Contribution - Team 21 - A food delivery service web application.
https://github.com/chingu-voyages/v50-tier3-team-21
api chingu chingu-voyage expressjs full-stack javascript jwt nodejs postgresql react sequelize-orm stripe tailwindcss tier-3 typescript
Last synced: 3 months ago
JSON representation
React |Tailwind | TypeScript | NodeJS | Express.js | PostgreSQL | JavaScript | Hungry Hippo - Chingu Voyage 50 Contribution - Team 21 - A food delivery service web application.
- Host: GitHub
- URL: https://github.com/chingu-voyages/v50-tier3-team-21
- Owner: chingu-voyages
- License: mit
- Created: 2024-06-29T15:18:17.000Z (7 months ago)
- Default Branch: development
- Last Pushed: 2024-08-12T18:35:40.000Z (6 months ago)
- Last Synced: 2024-08-12T21:21:56.585Z (6 months ago)
- Topics: api, chingu, chingu-voyage, expressjs, full-stack, javascript, jwt, nodejs, postgresql, react, sequelize-orm, stripe, tailwindcss, tier-3, typescript
- Language: TypeScript
- Homepage: https://hungryhippo-tgrams.onrender.com/
- Size: 71.4 MB
- Stars: 3
- Watchers: 4
- Forks: 2
- Open Issues: 14
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Hungry Hippo
[Link to the Hungry Hippo website](https://hungryhippo-tgrams.onrender.com/)
## Introduction
**Frontend**: React, Tailwind, TypeScript
**Backend**: NodeJS, Express, PostgreSQL, JavaScript
T-grams Development Team presents the [Hungry Hippo](https://hungryhippo-tgrams.onrender.com/) 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](https://www.chingu.io/). More about Voyage 50 and the project requirements can be found:
- [Chingu: Voyage Guide](https://github.com/chingu-voyages/Handbook/blob/main/docs/guides/voyage/voyage.md)
- [Chingu: Voyage 50 - Tier 3 Project Requirements and Specifications](https://github.com/chingu-voyages/voyage-project-tier3-restaurantsim)
## 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](https://docs.google.com/document/d/15vURBkOasLmq5THwEN9E6Dexm1B_NtrjHpaKKm70jZI).
For the Project Management, the team has used the [Github Projects' Kanban Board](https://github.com/orgs/chingu-voyages/projects/248)
### Design and Prototyping
The main design and prototyping is done by `Figma` and the file can be accessed [here](https://www.figma.com/design/jO2jiYuSf1iA3Eh3d0gbgb/Hungry-Hippo?node-id=1-172&t=0XKynAkPYrcUWODA-0).
On the other hand, some excerps are exported to the `docs` folder in `pdf` format.
- [Project Summary](./docs/wireframes/ProjectSummary.png)
- [Components](./docs/wireframes/components.pdf)
- [Overall Website Design](./docs/wireframes/website.pdf)
### Features
- [x] **User Authentication**:
- [x] Sign up, log in, and log out functionalities.
- [x] Password reset
- [x] **Restaurant Discovery**:
- [x] Search for nearby restaurants based on user location.
- [x] Filter restaurants by distance , food price , food categories and country
- [x] **Food Ordering**:
- [x] Browse food items from various restaurants.
- [x] Add items to cart and place orders.
- [x] **User Profiles**:
- [x] Manage personal details and view account balance.
- [x] Update profile information.
- [x] **Payment Integration**:
- [x] Top-up wallet
- [x] make payments for orders.
- [x] **Food Categories**:
- [x] Browse and search food items by categories.
- [x] **Map Integration**:
- [x] Interactive maps to view restaurant locations and delivery areas.
- [x] 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](https://hungryhippo.onrender.com/api/docs)
Authentication
- Signup: /auth/signup` - POST - raw/json data
```json
{
"username": "testuser",
"email": "[email protected]",
"password": "testpassword",
"confirmPassword": "testpassword",
*"firstName": "test",*
*"lastName": "test",*
*"contact": "1234567890"*
}
- Login: `/auth/login` - POST - raw/json data
```json
{
"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
```json
{
"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
```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": "[email protected]",
"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
```json
{
"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](https://www.postgresql.org/) relational database has been chosenfor this project. The database was created using [Sequelize](https://sequelize.org/) ORM and deployed on [Neon](https://neon.tech/).
By analyzing the proposed food items API from the deployed API [https://menus-api.vercel.app/](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](https://github.com/igdev116/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`](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/](https://hungryhippo.onrender.com/)
- frontend: [https://hungryhippo-tgrams.onrender.com/](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](./backend/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](./frontendbackend/env-sample)
- run `npm run dev`
- open http://localhost:5173 in your browser
## Testing
Some of the automated tests were written in [Jest](https://jestjs.io/) 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](https://www.postman.com/) and [Beekeeper Studio](https://www.beekeeperstudio.io/), and frontend functionalities were tested with the browsers on various devices.
## Technologies Used
### Programming Languages
- [HTML](https://developer.mozilla.org/en-US/docs/Web/HTML) - Hypertext Markup Language
- [CSS](https://developer.mozilla.org/en-US/docs/Web/CSS) - Cascading Style Sheets
- [TypeScript](https://www.typescriptlang.org/) was used for frontend
- [JavaScript](https://developer.mozilla.org/en-US/docs/Web/JavaScript) was used for backend
### Dependencies and Technologies
*Frontend*:
- [React](https://reactjs.org/) Frontend framework
- [Tailwind](https://tailwindcss.com/) CSS framework
- [Tailwind-merge](https://www.npmjs.com/package/tailwind-merge) - Tailwind utilities
- [Vite](https://vitejs.dev/) - Tool for building frontend
- [Axios](https://github.com/axios/axios) for http requests
- [dotenv](https://www.npmjs.com/package/dotenv) for environment variables
- [Tanstack](https://tanstack.com/) react query and devtools
- [React-Map-GL](https://www.npmjs.com/package/react-map-gl) for interactive maps
- [React-Map-GL-Geocoder](https://www.npmjs.com/package/react-map-gl-geocoder) for address search
- [React-Toastify](https://www.npmjs.com/package/react-toastify) for displaying notifications
- [React-Router](https://www.npmjs.com/package/react-router-dom) for declarative routing
- [React-Hook-Form](https://www.npmjs.com/package/react-hook-form) for form validation
- [Zod](https://www.npmjs.com/package/zod) for ts data declaration and validation
- [clsx](https://www.npmjs.com/package/clsx) clsx for class list
- [uuid](https://www.npmjs.com/package/uuid) - for the generation of unique ids
- [Mapbox-GL](https://www.mapbox.com/mapbox-gl-js/) - a JavaScript library for maps
- [geoJson](https://www.npmjs.com/package/geojson) - for creating, viewing, and sharing spatial data
*Backend*:
- [NodeJS](https://nodejs.org/en/) runtime environment
- [Express.js](https://expressjs.com/) web backend framework
- [PostgreSQL](https://www.postgresql.org/) database client libraries:
- [pg](https://www.npmjs.com/package/pg)
- [pg-hstore](https://www.npmjs.com/package/pg-hstore)
- [Cookie Parser](https://www.npmjs.com/package/cookie-parser)
- [Cors](https://www.npmjs.com/package/cors) library for cross-origin resource sharing
- [JWT](https://jwt.io/) - JSON Web Tokens
- [Bcrypt](https://www.npmjs.com/package/bcrypt) password hashing library
- [Nodemailer](https://nodemailer.com/) module for email sending
- [Sequelize](https://sequelize.org/) - ORM (Object-Relational Mapping)
- [dotenv](https://www.npmjs.com/package/dotenv) for environment variables
- [EJS](https://www.npmjs.com/package/ejs) - Embedded JavaScript templating
- [fs](https://nodejs.org/api/fs.html) and [path](https://nodejs.org/api/path.html) modules for file handling
- [Swagger UI](https://swagger.io/) and [Swagger JSDoc](https://github.com/Surnet/swagger-jsdoc) for API documentation
- [Jest](https://jestjs.io/) for testing
- [Stripe](https://stripe.com/) for payment processing
### Tools
**Hosting Platforms**
- [Render](https://render.com/) - Hosting and Live App deployment
- [Neon](https://neon.tech/) - PostgreSQL database hosting
- [GitHub](https://github.com/) - Source Control hosting and Project management
**Development and Design Tools**
- [Postman](https://www.postman.com/) - API testing
- [Beekeeper Studio](https://www.beekeeperstudio.io/) - Database testing and accessing
- [Visual Studio Code](https://code.visualstudio.com/) - Develompent code editor
- [Microsoft Designer](https://www.microsoft.com/en-us/designer/) - UI design and prototyping
- [Figma](https://www.figma.com/) - for wireframing and prototyping
- [Lucidchart](https://www.lucidchart.com/) for DB design
## Our Team: T-grams
1. Martha Mwangi - [GitHub](https://github.com/marthamwangi) / [LinkedIn](https://linkedin.com/in/martymwangi)
- Frontend Developer and Wireframe Designer
2. King Samuel - [GitHub](https://github.com/frugalcodes) / [LinkedIn](https://www.linkedin.com/in/samuel-igwe-031152226/)
- Backend Developer
3. Greg Minezzi - [GitHub](https://github.com/minezzig) / [LinkedIn](https://linkedin.com/in/gregminezzi)
- Frontend Developer and Scrum Master
4. Tomislav Dukez (Product Owner) - [GitHub](https://github.com/tomdu3) / [LinkedIn](https://www.linkedin.com/in/tomislav-dukez-bb2349231/)
- Backend Developer and Product Owner
1. Riry Nomenjanahary - [GitHub](https://github.com/TiaDev7474) / [LinkedIn](https://linkedin.com/in/riry-nomenjanahary-a47a85264)
- Frontend Developer (Wizard)
6. Albert Ngodi - [GitHub](https://github.com/ngodi) / [LinkedIn](https://linkedin.com/in/albertngodi)
- Backend Developer
---
© 2024 T-grams - The Hungry Hippo Team. _MIT License_. All rights reserved