Specialized

An online e-commerce bike shop built with React, Redux and Firebase.

---

Table of Contents

• Description
• Installation
• What I Learned
• References
• License
• Info

---

Description

Specialized is a globally famous brand that builds the best quality terrain bikes.

I have created a front end web app similar to the specialized website. The app has a clean and responsive UI, and a fully functional cart where a user can Add/Edit/Delete items.

Have a look at the Live version here.

Technologies

• React with Redux
• Firebase

Features

• Navigation and dynamic routing
• Add/Edit/Delete items to cart
• Firebase google and email authorization
• Firestore for storage
• Cart details persisted in session storage
• Stripe API integration for payment

---

Installation

Step 1 - Clone the repo

$ git clone https://github.com/roheat/specialized

Step 2 - cd in the repo

$ cd specialized

Step 3 - Install dependencies

$ npm install

Step 4 - Add Firebase to the project and provide your app's Firebase project configuration to /src/firebase/firebase.utils.js.

Step 5 - Run application

$ npm start

In browser, open http://localhost:3000

---

What I Learned

• Single page application routing using react router
• Wiring up redux by setting up the store, reducers, actions
• Working with selectors
• Setting up folder architecture for a large project
• Using firebase with react
• Authentication with email and password using firebase
• Working with SASS
• Persisting redux store data into session storage using redux-persist
• Working with nested routes
• Integrating Stripe API
• Deployment using heroku

---

References

• React
• Redux
• React Router
• Firebase
• redux-persist
• Specialized

---

License

MIT © roheat

---

Info

• Website - roheat.com
• Twitter - @roheatdotcom
• LinkedIn - Rohith Srivathsav

_{If you find a bug or improvement, feel free to raise an issue and send a PR!}