ecommerce-pub

E-commerce website template - public version

No preview in the development environment is available via "npm start" or "yarn start". Only code preview is available.

Languages and Tools:

Information about Tech stack is at the bottom

Interesting files to explore in a project:

Frontend

• package.json (explore libraries used in project)
• Index page (explore used libraries and utilities)
• Routes file (explore project structure)
• Cart component (React)
• Product grid component (React)
• Single product view component (React)
• Contact form (Formik library - React)
• Redux store configuration (explore Redux file structure and used libraries)
• Cart reducer (Redux - state management)

Backend

• package.json (explore libraries used in project, nodemon configuration)
• server.js - main entry file for Node (express) Backend
• Folder with public assets (fetched from Backend to Frontend product grid)
• Database configuration file (MongoDB Atlas - database in cloud)
• Sending products information via REST API (controller with pagination on server-side)
• Register, login functionality in express controller
• Express routes for user login, logout and checking if a user is logged in
• User model (mongoose library schema for MongoDB database)

E-commerce website template. Website have functionalities like:

• Login/Register using session based authentication and Database to store users
• Sending automated e-mails to users
• Browsing products using pagination, storing them in cart, checkout utility, and creating user reviews.
• Animations

Tech Stack Used (MERN stack):

• React.js (Create React App) using Typescript
• Express - Node.js framework
• MongoDB Atlas (NoSQL Database)
• Redux

Technology used

• Frontend

• HTML5
• Semantic HTML5 tags
• SVG Icons/Images
• CSS3
  • Flexbox
  • Responsive Website (media queries)
• Typescript
• React
  • Redux
    • Storing/controlling logged in user session
    • Storing/controlling cart state
    • redux-thunk
    • redux-persist
  • Formik - library for creating forms.
    Forms in Web App: Login, Register, Contact, Checkout.
  • Yup - library for form data validation
  • React Hooks
  • Material UI
  • Styled Components
  • react-spring
  • react-router
  • react-slick



• Backend

• Express
  • Login/Register using session based authentication and Database to store users
  • Sending mail via nodemailer library:
    • Confirmation mail after register, and after products have been purchased
    • Contact form
  • Fetching images from static folder from Backend to Frontend
  • Sending data about purchased products for certain user to Database - Checkout functionality
  • Storing user reviews for products in Database
• AWS - Amazon Web Services
  • EC2 - Web App is deployed on EC2 server instance
• MongoDB Atlas
  • NoSQL Database in cloud

Additional Tools Used

• Github Student Pack (free tools/resources for students for learning):
  • Domain from .tech
  • AWS Free Tier
  • Sentry - Web App monitoring tool and bug tracker
  • Deepscan - Code analysis tool
  • IconScout - Icons/Images
  • LogDNA - server logs storing service (EC2)
• Other
  • npm/yarn
  • Github/Git
  • TSLint
  • Prettier
  • ES5+
  • axios