# E-commerce Project (React) > This is a very big app and hence making notes of what we learn and also entire flow of the app here. ## 📚 Things we can learn ### 1. Styled components intro ```javascript import React from 'react' import { BrowserRouter as Router, Switch, Route } from 'react-router-dom' import styled from 'styled-components' import { Navbar, Sidebar, Footer } from './components' // THIS IS HOW WE DEFINE STYLED COMPONENTS const Button = styled.button` background: green; color: white; ` function App() { return (

comfy sloth starter

) } export default App ```
No name collisions in styled components that is the advantage, meaning, we can nest the styles like this
### 2. Service to send subscription emails Let's say we have a form in our website and we need to send some kind of subscription emails to let them know about the promotions we have. You can use a service like or
To know more, visit udemy react course from John - video # 437 - Formspree. He uses this kind of service for his website to give monthly promotions through email ### 3. How to format price `Intl` function handles all the currency conversion for us. Just pass the cents and it gives you back dollars with proper currency symbol $ at the beginning. For more info refer [#13.-format-price](#13.-format-price "mention") ```javascript export const formatPrice = (number) => { const formattedNumber = new Intl.NumberFormat('en-US', { style: 'currency', currency: 'USD', }).format(number / 100) // note that we still need to divide by 100 but don't have to format the decimals return formattedNumber // it automatically adds the currency representation (Adds $ at the beginning) } export const getUniqueValues = () => {} ``` ### 4. useHistory hook To programmatically navigate back to some page, we can use this hook. Refer to [#15.-single-product-functionality-part-2](#15.-single-product-functionality-part-2 "mention") that shows the usage of useHistory. An alternative approach to this is * to use Redirect (react router 5) like this - Later we will use this too in our app when using auth0 * to use Navigate in (react router 6) like this - Later we will use this too in our app when using auth0 and converting our project to react-router-6 ## 🏄‍♀️ Flow of the app > For each step, if we are modifying any files I will mention that at the beginning of that step (blue color hint). Green color hint button will be sometimes used at the end of some step to describe what functionality should be working at that particular step. If there is any complex things that happens in any step we will add that to Things we can learn section above and I will explain that in detail ### 1. Starter Project Can be found here **commit ID** - `a67783a5c95c19a5ba74c50643c4d8130e672f55` ### 2. React router - Add all routes {% hint style="info" %} 25\_ecommerce\_app/src/pages/index.js 25\_ecommerce\_app/src/App.js {% endhint %} Let's add react router to display different routes like Home page, About page, Products page, Single Product page, Cart, Checkout. We will also use `Pages/index.js` to import all Pages into index page as usual.
Just to brush your memory, this is how we add routes in react-router-5. Taking an example here to show products ```javascript {/* Products */} ``` and the single-product route will be like this ```javascript {/* SingleProduct -> This would be little different as it would have a children prop*/} } /> ``` We need to have Navbar, Sidebar and Footer in all the pages so we add it like this. Technically, we can place Sidebar in any order(as it is position fixed) but let's just put it after Navbar ```javascript return ( {/* Display Navbar & Sidebar in all pages, so it's placed outside of */} {/*Sidebar is position fixed so can be put in any order*/} {/* Home */} {/* About */} {/* Cart */} {/* Products */} {/* SingleProduct -> This would be little different as it would have a children prop*/} } /> {/* Checkout -> This would be wrapped in PrivateRoute later */} {/* Error */} {/* Display footer in all pages, so it's placed outside of */}