Relish Restaurant Discovery App offers a one-stop-shop solution that enables passionate food lovers to explore new restaurants in their beloved cities in Australia. Engineered with the latest technology in reactive programming and a robust backend architecture, Relish provides a seamless user experience which spark their curiosity for food, and a secure environment for users to track their culinary journey.
Presentation Slides
https://github.com/user-attachments/files/16264286/V3.Relish.App.pdf
Click the thumbnail below to watch demo on Youtube
Click HERE to try the app yourself-> https://relish.quest
The link is working as of July 18, 2024. However, as there is a 30 days free trial period associated with the Yelp Fusion API Key which powers the app, on top of that, Google Map API key (which powers location autocomplete and dynamic map) only comes with 90 days free trial, the app may no longer work optimally on this link. Please refer to the Installation section below to learn more about how to set up locally.
Built with Vite and React Router V6, the Relish front-end focuses on responsive UI/UX design by incorporating modern technologies such as astonishingly fast Hot Module Replacement (HMR) that comes out-of-the-box with Vite, and single page application (SPA) routing powered by React Router v6 to name a few.
- React Router v6: Manages seamless navigation within the app ๐ฆ.
- Component Design: Modular and reusable components for DRY code ๐งฉ.
- Chakra UI Styling: A modular and accessible component library for rapid UI development ๐จ.
- Figma: A great wireframing toolkit which speeds up the design phase tremendously ๐ ๏ธ.
- Redux: A single source of truth to manage all client-side states and data flow โจ.
- Accessibility: Inclusive design that adheres to WCAG guidelines for all users ๐ฅ.
- Yelp API: We make use of Yelp API that delivers a huge library of restaurant listings ๐ง .
- Google Map Javascript API: Google Map API provides static map and autocomplete features for location searching ๐.
- Performance Optimizations: We've fine-tuned every query and route for maximum efficiency, keeping the user experience swift and responsive โก.
Our back-end is a fortress built on Django and Docker, featuring a RESTful API that's both powerful and easy to use.
- Database: Postgresql integration with Django ODM for data management ๐๏ธ.
- Authentication: JWT for secure, token-based user sessions ๐.
- Data Flow Algorithm: Sophisticated logic to empower users' restaurants exploration journey ๐.
- Scalability: Ready to grow and scale with the implementation of Docker container ๐.
- Database Integration: Leveraging Postgresql, we handle vast amounts of data with ease, ensuring all user interactions are stored and retrieved without a hitch ๐๏ธ.
- Secure Authentication: Using JWT for session management, we ensure that each login is as secure as it is seamless ๐.
We embrace Agile, champion CI/CD, and are committed to high-quality code with comprehensive testing.
- Credential Verification: We verify credentials securely ๐ฎโโ๏ธ.
- Token Creation & Management: JWTs are created and managed securely for session handling ๐ซ.
- HTTPS/SSL: All data is transmitted securely over SSL, always ๐.
- Login: Secure access to your personal space. ๐
- Signup: Join our community and start a new journey. ๐
- Restaurant Filtering: Smart algorithms to filter out visited restaurants and help you discover your next restaurant. ๐
- Relish Awards: Visit new restaurants to earn Relish Awards ๐
- Mobile App: Search on-the-go with our mobile application. ๐ฑ
The Restaurant Discovery App is composed of a front-end and a back-end repository. Follow these steps to set up your local development environment.
git clone https://github.com/haoningng/relish.git
cd relish
npm install
npm run dev
Make sure you create an .env file with the following details:
VITE_PUBLIC_HOST=http://localhost:8000
VITE_PUBLIC_SITE_URL=http://localhost:3000
VITE_APP_NAME=Relish
VITE_PUBLIC_REDIRECT_URL=http://localhost:3000
VITE_GOOGLE_API_KEY=<YOUR OWN GOOGLE API KEY>
VITE_MAP_ID=<YOUR OWN GOOGLE MAP ID>
Head over here to get your Google API key.
Head over here to get your Google Map ID.
Find the repo @ https://github.com/Goaty-yagi/Relish_backend
Follow the steps in the README.md to set up local docker container before running local backend server.
Find the repo for Yelp API Proxy Server @ https://github.com/Goaty-yagi/proxy-server
Set up the proxy server with your own Yelp Fusion API Key.
At Relish, we believe that the first impression is made through the eyes. Our UI/UX design philosophy centres on creating an aesthetically pleasing interface that not only catches the eye but also fosters an intuitive user experience.
- Intuitive Design: Our interface is designed with the user's intuitive journey in mind, ensuring that discovery and tracking restaurants visit is a seamless process. ๐งญ
- Aesthetic Details: From the colour palette to the typography, every detail has been meticulously crafted to provide a visually pleasing environment that uplifts your culinary journey. ๐จ
- Responsive Layouts: Our layouts are built to be responsive, providing a consistent and engaging experience across all devices, be it on a phone, tablet, or desktop. ๐ฑ๐ป๐ฅ๏ธ
- Animation and Feedback: Subtle animations and immediate feedback mechanisms are integrated to make the app not just a tool, but a delight to use. ๐
- Accessibility and Inclusivity: We prioritize accessibility in our design to ensure that everyone, regardless of ability, can use our app effectively. This commitment to inclusivity is at the heart of our design strategy. โฟ๐ค
We're constantly refining our design to ensure that while aesthetics evolve, the experience remains timeless.
Contributions make the open-source community such an amazing place to learn, inspire, and create. Any contributions you make are greatly appreciated.
If you have a suggestion that would make this better, please fork the repository and create a pull request. You can also simply open an issue with the tag "enhancement".
Don't forget to give the project a star! Thanks again!
- Fork the Project
- Create your Feature Branch (
git checkout -b feature/AmazingFeature
) - Commit your Changes (
git commit -m 'Add some AmazingFeature'
) - Push to the Branch (
git push origin feature/AmazingFeature
) - Open a Pull Request
Like the project? Star us on GitHub!
This project is licensed under the MIT License - see the LICENSE.md file for details.