Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/tinspham209/kingstonedanang
A website for display Granite & Marble stone, Furniture - Exterior
https://github.com/tinspham209/kingstonedanang
material-ui react sanity-io
Last synced: about 8 hours ago
JSON representation
A website for display Granite & Marble stone, Furniture - Exterior
- Host: GitHub
- URL: https://github.com/tinspham209/kingstonedanang
- Owner: tinspham209
- Created: 2021-03-10T17:08:54.000Z (over 3 years ago)
- Default Branch: master
- Last Pushed: 2023-12-15T02:44:42.000Z (11 months ago)
- Last Synced: 2023-12-15T03:54:40.859Z (11 months ago)
- Topics: material-ui, react, sanity-io
- Language: JavaScript
- Homepage: https://kingstonedanang.com/
- Size: 4.63 MB
- Stars: 1
- Watchers: 2
- Forks: 1
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Project: KingStoneDanang Website
### Date: Mar 2021
### Releases
- Client: https://kingstonedanang.com
- Server: http://server.kingstonedanang.com
### Screenshot
### Functions
Responsive Design Optimized with 2 screen: Large Screen(>=1280px) and Mobile Screen(<1280px)
**Client:**
- Homepage
- Products / Single Product
- Blogs / Blog post
- Store - Display on Maps
- About us
**Server:**
- Sanity
- Blog Posts Management
- Author of Blog Post Management
- Products Management
- Images Management
## Installation Guide
### Tech-Stack
- React Hooks
- react-router-dom
- redux-toolkit
- @sanity.io
- Firebase
- styled-components
- Material-UI
- react-icons
- leaflet
- react-lazy-load-image-component
- react-scroll
### Directory Structure
```
.
├── .gitignore
├── package.json
├── package-lock.json
├── README.md
├── deploy-firebase
├── .firebaserc
├── firebase.json
├── public
└── src
```
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
### Production
**Setup Server**
- Clone this project
- Go to `/server`
```
cd ./server
```
- Install dependencies
```
npm install
```
- Start packager, server is running on **PORT 5000**
```
npm start
```
**Setup Client**
- Go to `/client`
- Install dependencies
```
npm install
```
- Start packager, server is running on **PORT 3000**
```
npm start
```
### Bugs:
- Logo Img on `navbar` & `footer` has margin on IOS devices
- Components is NOT re-usable
### How to Deploy
**Client:**
- cd to `client`
- run this line:
```
npm run deployfirebase
```
**Server:**
- cd to `server`
- run this line:
```
sanity deploy
```
### 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";
```