Dais-h is an e-commercial React web application implementing ReactJs, React router, Redux & Firebase, along with the real payment gateway Stripe. Redux in this project plays a vital role as a global state management. With Redux, we can easily read and update the state in the whole tree of application, by using React hooks. Firebase additionally is used to store and retrieve user info and product's data by doing CRUD requrest to the endpoint of backend.
In this project, besides HTML, CSS, Javascript, and ReactJs, Redux is applied to empower the Flux- architecture to make state management easier. The idea is to separate the state into its own components from React components for a better folder/file structures. Firebase as a Baas (Backend As A Service) provides a means to link the UI and client-side logic to the backend provided as Authentication, Firestore Database, Storage and so on. Additionally, Progressive Web Application is applied to help us measuring the quality of the web app.
The following content will be covered in this README.md:
- Learning Objectives
- Requirements
- Installation & Usage
- Author
- References & Helpful Links
- Contributing
- License
After fulfilling the project, I acquire knowledge to:
- Build and style dynamic webpages with semantic HTML and CSS and Javascript with ReactJs library on top
- Use Eslint to check nested elements, indentation, comments, and line breaks
- Configure Stripe payment gateway and Firebase of Google cloud services
- Implement the use of ReactJs for DOM manipulation and minify the files of our project with the help of Webpack from
create-react-app - Implement the use of Material UI, Sass and styled-component and Google font, to advance the styling of the project and implement Google's Material Design concept
- Implement SCSS extenstion styling via class, id and element selectors using external stylesheets and inline/nesting styles to make 3D popping up for characters
- Implement the use of
.jsxextension to build reuseable component for user interfact, along withReact hooks - Implement the use of CRUD requests to the Bass service, along with
async/awaitto retrieve data from Firebase - Perform common commands via the command line to interface with the operating system, such as navigating the file tree and creating, opening and comitting the file and directory to github
- Use Git workflow to initialize projects, track changes, and host via remote server
- Execute live deployment using GitHub Pages
Build an e-commercial application that demonstrating the use of Redux & Firebase in create-react-app and apply service-worker to measure the quality of the project