Building E-Commerce App with React, Redux Toolkit, Tailwind CSS, Framer Motion, Firebase Hosting
Updated: May 10, 2023
The E-Commerce App with React, Redux Toolkit, React Router, Tailwind CSS, Tailwind-Styled-Components, Framer Motion, and Firebase is a dynamic and modern e-commerce application that allows users to browse and purchase products online. The application is built using popular front-end and back-end technologies and tools.
The e-commerce app will allow users to browse through different categories of products, add products to their cart.
The app will be built using React, a popular JavaScript library for building user interfaces, and Redux Toolkit, a state management library for managing the app's data. The app's routing will be handled using react router, a library that provides dynamic routing capabilities. Tailwind CSS will be used for styling the app's UI, and tailwind-styled-components will be used to integrate Tailwind CSS classes into the app's styled components. Framer Motion, a library for creating smooth animations, will be used to add an element of interactivity to the app's UI.
Finally, the app will be hosted on Firebase hosting, a cloud hosting platform that offers fast and secure hosting for web apps. Firebase hosting will also provide features such as SSL encryption, CDN caching, and automatic scaling to ensure that the app can handle high levels of traffic.
The project will be divided into several stages, including design, development, and deployment. Throughout each stage, we will use best practices to ensure that the app is scalable, maintainable, and easy to use. By the end of the project, we will have a fully functional e-commerce web application that showcases the power of modern web development technologies.
Overall, the E-Commerce App with React, Redux Toolkit, React Router, Tailwind CSS, Tailwind-Styled-Components, Framer Motion, and Firebase is a comprehensive e-commerce application that provides users with a seamless and enjoyable shopping experience. Getting Started with Redux Toolkit
Plugins:
ES7 React/Redux/GraphQL/React-Native snippets
Tailwind CSS IntelliSense
npm intellisense
Libraries:
> npm i react-icons react-router-dom tailwind-styled-components framer-motion react-hot-toast
Tailwind CSS Configuration with React
React RouterRead More
Note: Import 'BrowserRouter' in index.js and wrap the 'App' component with 'BrowserRouter'
Using Redux Toolkit
Note: Check out index.js, where 'App' is wrapped with redux 'store' using 'Provider', after creatin the 'store' Installing Firebase 9: > npm install firebase > npm install -g firebase-tools Deploying into Firebase & Google Firebase Authentication: Firebase Documentation Firebase - Creating a project and app in Firebase - Register app (Add Firebase to your web app) Note: While creating an App, choose Firebase Hosting option & Copy the Firebase configuration object by choosing the "Config" option under SDK setup and configuration. Paste Firebase configuration object in the 'firebase.js' of your React project. Enabling Google Firebase Authentication:
Go to Authentication and enable "Email/Password" & Google options Deploy to Firebase Hosting, run the following firebase commands: > firebase login > firebase init hosting - use 'build' as public directory when you are prompted. - Give 'Y' for configure as a single-page app option - Set up automatic builds and deploys with GitHub? Yes - Set up workflow to run a build script before every deploy? Yes
- Set up automatic deployment to your site's live channel when a PR is merged? Yes Note: After committing your changes in the GitHub, run 'build' and 'deploy' commands to update your firebase hosting. Note: If you are not able to find out your listed firebase projects, after selecting the 'firebase hosting' option, just run "firebase logout" and login again. Creating an optimized production build: Builds the app for production to the build folder. > npm run build > firebase deploy
Comments