Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/tinspham209/noor-coffee
Coffee Shop Website v1.0 - Features: Homepage, Products, display store in Maps, Membership, Feedback form, About, Blog
https://github.com/tinspham209/noor-coffee
firebase leaflet react styled-components
Last synced: 2 months ago
JSON representation
Coffee Shop Website v1.0 - Features: Homepage, Products, display store in Maps, Membership, Feedback form, About, Blog
- Host: GitHub
- URL: https://github.com/tinspham209/noor-coffee
- Owner: tinspham209
- Created: 2020-09-07T11:30:30.000Z (over 4 years ago)
- Default Branch: master
- Last Pushed: 2023-12-15T17:33:28.000Z (about 1 year ago)
- Last Synced: 2023-12-15T18:42:27.691Z (about 1 year ago)
- Topics: firebase, leaflet, react, styled-components
- Language: JavaScript
- Homepage: https://noordn.cf/
- Size: 6.24 MB
- Stars: 1
- Watchers: 2
- Forks: 1
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Project: NOOR Coffee Website
### Date: Sep - 2020
### Functions
- Homepage
- List of products
- Display store in Maps
- Scan QR Code to delivery on Grab & Loship
- Membership form
- Feedback form
- About us (coming soon)
- Blog (coming soon)
### Screenshot
### Next Steps:
- can't use navbar on IOS `./components/navbar`
- Layout broken on IOS `pages/homepage`
- Change smaller star icon for IOS devices `pages/feedback`
- Add information on `page/about`
- Add `pages/blog`
### Directory Structure
```
.
├── .gitignore
├── package.json
├── package-lock.json
├── README.md
├── deploy-firebase
├── .firebaserc
├── firebase.json
├── public
└── src
├── assets
└── img
├── components
├── Footer
├── InfoSecFeedback
├── InfoSecRegisterMember
├── InfoSection
├── InfoSectionFull
├── Navbar
├── Products
└── ProductList
└── Product
├── StoreMaps
└── Maps
├── UI
├── Spinner
├── NotFound
└── index.js
├── ScrollToTop.jsx
└── index.js
├── lib
└── firebase.js
├── pages
├── About
├── Blog
├── Feedback
├── Grab
├── HomePage
├── Loship
├── Membership
├── Products
└── Stores
├── App.js
├── GlobalStyles.js
├── utils.js
└── index.js
```
For the project to build, these must exist with exact filenames:
- `public/index.html` is the page template
- `src/index.js` is the entry point
- `src/GlobalStyles.js` is the Global Styles
- `src/App.js` is the Router
## Installation Guide
### Tech-Stack
- React Hooks
- react-router-dom
- styled-components
- Firebase
- react-icons
- leaflet
- react-leaflet
- react-lazy-load-image-component
- react-sticky-box
- react-rating-stars-component
- img design from https://undraw.co/
### Production
- Clone this project
```
git clone https://github.com/tinspham209/noor-coffee
```
- Install dependencies
```
npm install
```
- Start the server
```
npm start
```
### Development
- Clone this project
- Install dependencies
```
npm install
```
- Start packager
```
npm start
```
### Components function:
- **InfoSection**
- **InfoSectionFull** : is InfoSection, Full height & children in center
- **StoreMaps**: is InfoSection, and have custom Maps
- **Maps**: OpenStreetMaps custom Maps component
- **Products**: bem Layout to Left Right
- **ProductList**: List of Products
- **Product**: product information
### How to name a folder and a file
- Folder name: - Ex: `InfoSection`
- Component file name: should be -- Ex: `InfoSection.jsx`
- Style component file name: should be -- Ex: `InfoSection.elements.js`
### How to import and export module?
- Import:
```js
//import every thing
import * as React from "react";
import * as ReactDOM from "react-dom";
//for default export
import InfoSection from "./InfoSection";
//for named export
import { InfoSec, InfoRow } from "./InfoSection.elements";
```
### How to style for each component?
- Create a styled-component file. Ex: `InfoSection.elements.js`
- Import to `jsx` file
```js
// InfoSection.jsx
import { InfoSec, InfoRow } from "./InfoSection.elements";
```
### How to update new product
```js
// src/pages/Products/Data.js
export const products = {
lightBg: false,
lightText: true,
lightTextCard: false,
buttonLabel: "Chi tiết",
productList: [
{
id: "special", // need to update
headlineName: "Nổi bật", // need to update
products: [
{
cardTitle: "Cà phê Noor", // need to update
img: require("../../assets/img/products/cf-que.jpg"), // need to update
description: "25.000Đ", // need to update
urlLinkBtn: "/products",
newProduct: true, // need to update
trend: true, // need to update
},
],
},
],
};
```
- `id`: ID for onScrollToView
- `headlineName`: name of productList
- `cardTitle`: name of product
- `img`: url link image of product
- `description`: price of product
- `newProduct`: an Label tag for new product
- `trend`: an Label tag for Best Seller product
### How to update Marker, Popup, Tooltip on Maps
- Contact me !
### How to update InfoSection
- Contact me !
### How to update InfoSectionFull
- Contact me !
### How to update InfoSecFeedback
- Contact me !
### How to update InfoSecRegisterMember
- Contact me !
### How to deploy to firebase hosting
- Contact me !
### How to get firebaseConfig
- Contact me !
### How to POST data to Firestore
- Contact me !
### How to export data from Firestore to Google Sheets
- Contact me !