Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/thiagocabralcorreia/coffeehouse-website
🖥️☕ Coffee House: brochure website built with React.js and hooks. Responsive design using Sass.
https://github.com/thiagocabralcorreia/coffeehouse-website
cafe coffee css hooks html javascript menu quizapp react reactjs responsive sass ui-components ux website
Last synced: 23 days ago
JSON representation
🖥️☕ Coffee House: brochure website built with React.js and hooks. Responsive design using Sass.
- Host: GitHub
- URL: https://github.com/thiagocabralcorreia/coffeehouse-website
- Owner: thiagocabralcorreia
- Created: 2021-07-10T23:47:22.000Z (over 3 years ago)
- Default Branch: main
- Last Pushed: 2022-08-24T21:15:14.000Z (over 2 years ago)
- Last Synced: 2024-11-10T22:42:01.537Z (3 months ago)
- Topics: cafe, coffee, css, hooks, html, javascript, menu, quizapp, react, reactjs, responsive, sass, ui-components, ux, website
- Language: JavaScript
- Homepage: https://coffeehouse-website-kohl.vercel.app/
- Size: 83.4 MB
- Stars: 0
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
Coffee House
Website created to study React and Hooks, responsive design, animations and good practices in front-end development.
## Workflow
This product was developed with:
- React.js front-end library;
- Sass pre-processing language;
- Responsive coding;
- UI Design;
- NPM.
## Pages and Components
- Home: image slider, banners, newsletter subscription with validation;
- Contact: form with validation, character count, errors and success message;
- Stores: store list with addresses, facilities and filter by services;
- Menu: interactive menu with context, video cover and banners;
- Impact: animated charts and gallery grid with modal slideshow;
- Header: logo, links, mobile menu and dropdown menu;
- Footer: external links, copyright and social media link icons;
- Quiz: coffee quiz with ten questions and score;
- About, The Team and 404 Page not Found.
## Extra Packages Installed
- react-modal;
- react-spinners;
- sass.
## Quick Start
In the project directory, you can run:
```
npm start
```
Runs the app in the development mode.\
Open [http://localhost:3000](http://localhost:3000) to view it in the browser.
The page will reload if you make edits.\
You will also see any lint errors in the console.