README.md

Restaurant Finder

Start this project with Single Command

View Demo · Report Bug · Request Feature

About

Monstar Lab Bangladesh have a team party every month, every team goes out and has lunch together to strengthen team bonding. Through this application, they can easily search restaurents nearby (within 3 km).

(👆🏻)

Features

• Random selection of a restaurant within 3 km of the Monstar Lab Bangladesh Office.

• Provide a map view showing the location of the restaurant

• Do a keyword search for restaurants within 3 km of the office.

• Instead of showing all restaurents at a time, we have CLUSTER support.

• PWA support.

(👆🏻)

Built With

• React.js
• TypeScript
• Redux Toolkit
• Ant Design
• Google Map
• FOURSQUARE Places API
• Tailwindcss
• React Hook Form
• React Query
• Supercluster
• Use Supercluster

(👆🏻)

Getting Started

Instructions to setup this project locally. To get a local copy up and running follow these simple example steps.

Prerequisites

• Node.js
• Yarn

  npm install --global yarn

• Git
• Visual Studio Code

Installation

1. Clone the repo

   git clone https://github.com/alamariful1727/restaurant-finder.git

2. Install packages

   yarn

3. Create a project at FOURSQUARE and get your keys (Client Id & Client Secret) from https://developer.foursquare.com
4. Copy .env.example and create a new file named env.local

    REACT_APP_FSQ_CLIENT_ID=<ENTER FOURSQUARE CLIENT_ID>
    REACT_APP_FSQ_CLIENT_SECRET=<ENTER FOURSQUARE CLIENT_SECRET>
    REACT_APP_FSQ_VERSION=20190425
    REACT_APP_GOOGLE_API_KEY=<ENTER GOOGLE MAP API KEY>

   (👆🏻)

Development

• Run the project locally

  yarn start

• Watch CSS

  yarn watch:css

(👆🏻)

Test

• Run tests

  yarn test

(👆🏻)

Production

• Build minified CSS

  yarn build:css

• Run build command

  yarn build

(👆🏻)

Technical Summary & Architecture

TypeScript

Static type checking, better intelliSense, better refactoring, Less amount of undefined errors & Better readability and maintainability.

Redux Toolkit

For efficient Redux development.

Tailwindcss

Optimized for production with minified and purged css.

Workbox

A production-ready service worker for your Progressive Web App.

GCP Credential

Two types of restrictions have been applied to the credential.

• Application restrictions
  • Website restrictions
    • https://restauranfinder.netlify.app/
    • http://localhost:3000/
• API restrictions
  • Restrict key
    • Maps JavaScript API

Google Map

@react-google-maps/api package has been used for Google Map rendering.

Cluster

Instead of showing all restaurents at a time, we have used CLUSTER.
supercluster & use-supercluster packages have been used for clustering.

(👆🏻)

Future Updates

• Search nearby venus by using user's current location

• Search nearby venus by using user's custom location input

• Add more information in single venue view

• Add splash screens for PWA

• Add MIT License

(👆🏻)

Contributing

Contributions are what 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 repo 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!

1. Fork the Project
2. Create your Feature Branch (git checkout -b feature/AmazingFeature)
3. Commit your Changes (git commit -m 'Add some AmazingFeature')
4. Push to the Branch (git push origin feature/AmazingFeature)
5. Open a Pull Request

(👆🏻)

Contact

Ariful Alam

(👆🏻)