Reactjs Ecommerce Website | part 1 | Creating Responsive Products & Category UI

Introduction

In this tutorial, we will create a responsive eCommerce website using ReactJS, Node.js, Firebase, Stripe, and Zustand. This is the first part of a series that focuses on building a full-stack eCommerce project from scratch. By following these steps, you’ll learn how to set up the project, implement a responsive UI, and integrate various technologies for a seamless user experience.

Step 1: Set Up the Project

1. Initialize the React Project

   • Use Create React App to set up your project:

     npx create-react-app ecommerce-app
     

   • Navigate into your project directory:

     cd ecommerce-app
     

2. Install Necessary Libraries

   • Install Tailwind CSS for styling:

     npm install tailwindcss postcss autoprefixer
     

   • Install Zustand for state management:

     npm install zustand
     

3. Configure Tailwind CSS

   • Create Tailwind configuration files:

     npx tailwindcss init -p
     

   • Add Tailwind directives to your src/index.css file:

     @tailwind base;
     @tailwind components;
     @tailwind utilities;
     

Step 2: Create the Header

1. Create a Header Component

   • In the src/components directory, create a file named Header.js.
   • Add the following code for a basic header:

     import React from 'react';
     
     const Header = () => {
       return (
         <header className="bg-gray-800 text-white p-4">
           <h1 className="text-2xl">E-Commerce Site</h1>
         </header>
       );
     };
     
     export default Header;
     

2. Use the Header in App Component

   • Import and include the Header component in your App.js:

     import Header from './components/Header';
     
     function App() {
       return (
         <div>
           <Header />
           {/* Other components will go here */}
         </div>
       );
     }
     
     export default App;
     

Step 3: Set Up Routing

1. Install React Router

   • Install React Router to manage navigation:

     npm install react-router-dom
     

2. Configure Routes

   • Use React Router to set up routes in your App.js:

     import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
     
     function App() {
       return (
         <Router>
           <Header />
           <Switch>
             <Route path="/" exact component={Home} />
             {/* Add more routes as needed */}
           </Switch>
         </Router>
       );
     }
     

Step 4: Create the Footer

1. Create a Footer Component

   • In the src/components directory, create a file named Footer.js.
   • Add the following code for the footer:

     import React from 'react';
     
     const Footer = () => {
       return (
         <footer className="bg-gray-800 text-white p-4">
           <p>© 2023 E-Commerce Site</p>
         </footer>
       );
     };
     
     export default Footer;
     

2. Include the Footer in App Component

   • Import and include the Footer component in your App.js:

     import Footer from './components/Footer';
     
     function App() {
       return (
         <Router>
           <Header />
           <Switch>
             <Route path="/" exact component={Home} />
           </Switch>
           <Footer />
         </Router>
       );
     }
     

Step 5: Create Not Found Page

1. Set Up a Not Found Component

   • Create a NotFound.js file in the src/components directory with a simple message:

     import React from 'react';
     
     const NotFound = () => {
       return <h2>404 - Page Not Found</h2>;
     };
     
     export default NotFound;
     

2. Add the Not Found Route

   • Update your routing in App.js to include the Not Found page:

     <Route component={NotFound} />
     

Step 6: Start the Backend

1. Set Up Node.js Backend

   • Create a new directory for your backend and initialize it:

     mkdir backend
     cd backend
     npm init -y
     

2. Install Backend Dependencies

   • Install Express and other necessary packages:

     npm install express cors body-parser
     

3. Create Basic Server

   • Set up a basic Express server in server.js:

     const express = require('express');
     const cors = require('cors');
     
     const app = express();
     app.use(cors());
     app.use(express.json());
     
     app.get('/', (req, res) => {
       res.send('API is running...');
     });
     
     const PORT = process.env.PORT || 5000;
     app.listen(PORT, () => console.log(`Server running on port ${PORT}`));
     

Conclusion

In this part of the tutorial, you learned how to set up a React eCommerce website from scratch. You created a responsive header and footer, configured routing, and set up a basic Node.js backend. In the next parts of the series, you will delve deeper into dynamic routing, fetching data, and creating various UI components for your eCommerce site. Happy coding!