Link to the Hungry Hippo website
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:
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
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.
-
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 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
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
.
- Render was used as the hosting platform for the live project deployment.
- backend: https://hungryhippo.onrender.com/
- frontend: https://hungryhippo-tgrams.onrender.com/
- 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
- Install dependencies
from the root directory:
- 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
- Install dependencies
from the root directory:
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.
- HTML - Hypertext Markup Language
- CSS - Cascading Style Sheets
- TypeScript was used for frontend
- JavaScript was used for backend
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:
- 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
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
- Frontend Developer and Wireframe Designer
- Backend Developer
- Frontend Developer and Scrum Master
- Backend Developer and Product Owner
- Frontend Developer (Wizard)
- Backend Developer
© 2024 T-grams - The Hungry Hippo Team. MIT License. All rights reserved