tabbiho / kopiRAcoon-frontend

A coffee app (Singaporean version) 🍮

Home Page:https://kopiracoon.netlify.app/login

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

About

KopiRAcoon is a coffee app that aims to help people order coffee(kopi) in their favorite proportion in Singapore. Singapore has a strong coffee culture and the naming of coffee is largely influenced by a myriad of dialects which may be confusing for non-locals or even the younger generation who are slowly losing touch with their native dialects.

Deployed Link

Deployed link can be found at: https://kopiracoon.netlify.app/login

Installation

For the project to run locally on your machine:

  1. npm install to install necessary packages
  2. npm run start to run the Create React App locally
  3. Open browser and view the project on http://localhost:3000

Note: This is the frontend repo. The backend repo can be viewed here.

Walkthrough

1. User login

login page

2. Home page

Users can choose their favorite proportion by adjusting the slider which will trigger graphic animation of the coffee components

home page

Translations are available. Support up to 6 languages which include, Mandarin(Simplified and Traditional), Japanese, Korean, German, French and Spanish

home page

3. Map

Incorporated the use of Google Map to help users find nearby coffee drinking spot

image

4. Favorites

Users can store their some of their favorites and view them easily

library

Built with

Frontend

  • ReactJS

Backend

  • NodeJs
  • ExpressJs
  • Sequelize/Postgres

Functionalities

  • i18next(translation)
  • Google Map API

Styling

  • ChakraUI
  • FramerMotion (Animation)

ERD

ERDkopiRacoon

Contributors

Developed by Tabithan Ho and Cheena Eng

About

A coffee app (Singaporean version) 🍮

https://kopiracoon.netlify.app/login


Languages

Language:JavaScript 84.9%Language:CSS 13.1%Language:HTML 2.0%