- 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)
- Initial Project
- setup react, install tool
- Design Wireframe
- Creating globalStyles
- Creating Navbar
- Initial Homepage
- Creating Footer
- Creating InfoSection
- Import Data to InfoSection
- Create Stores page
- Create StoreMaps component
- Create Maps component
- Implement OpenStreetMap to StoreMaps
- Deploy to Firebase
- Add custom domain
- Add SSL certification for domain
- Import Data to Stores page
- Create Products page
- Create Products component
- Create ProductList component
- Create Product component
- Import Data to Products page
- Optimize load image with: LazyLoad image
- Add StoreMaps to homepage
- Add Products Special to homepage
- Add label newProduct of Product
- Add label trend of product
- Import image of product
- Redirect to Grab
- Redirect to Loship
- Membership page UI
- Setup Firestore
- Membership database
- POST member data to Firestore
members
- Export data from Firestore to Google Sheets
- Feedback page UI
- POST feedback data to Firestore
feedback
- 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
.
├── .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 templatesrc/index.js
is the entry pointsrc/GlobalStyles.js
is the Global Stylessrc/App.js
is the Router
- 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/
- Clone this project
git clone https://github.com/tinspham209/noor-coffee
- Install dependencies
npm install
- Start the server
npm start
- Clone this project
- Install dependencies
npm install
- Start packager
npm start
- 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
- Folder name: - Ex:
InfoSection
- Component file name: should be -- Ex:
InfoSection.jsx
- Style component file name: should be -- Ex:
InfoSection.elements.js
- Import:
//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";
- Create a styled-component file. Ex:
InfoSection.elements.js
- Import to
jsx
file
// InfoSection.jsx
import { InfoSec, InfoRow } from "./InfoSection.elements";
// 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 onScrollToViewheadlineName
: name of productListcardTitle
: name of productimg
: url link image of productdescription
: price of productnewProduct
: an Label tag for new producttrend
: an Label tag for Best Seller product
i'll write it as soon as i can 😀
i'll write it as soon as i can 😀
i'll write it as soon as i can 😀
i'll write it as soon as i can 😀
i'll write it as soon as i can 😀
i'll write it as soon as i can 😀
i'll write it as soon as i can 😀
i'll write it as soon as i can 😀
i'll write it as soon as i can 😀