jithstephen13/trademart

TredMart is clone website of IndiaMart. IndiaMart Indian e-commerce company that provides B2B and customer to customer sales services via its web portal

TRADEMART

Contributors

Jith Stephen.

swarup kadoli.

swati sucharita mohanty.

Shivam Kumar.

Steps to follow

git clone

npm i

Project TredeMart

Hello everyone, this is a Readme for our construct week project that has been completed successfully within the duration of 5 days. It was really greate experience for us. Below described the Features of our project.

Deployed Links

Deployed backend URL

Project Details:

We got given a task to make a functional clone website of IndiaMart. IndiaMart Indian e-commerce company that provides B2B and customer to customer sales services via its web portal. The website some pages such as Login, signup, Landing-page, product,product detailes ,admin etc.we tried my best to clone the website from scratch based on the knowledge gained till unit-5 of Journey at Masai School.

So we are tried to connect our user and deler through email ,Means if our user is intrested in purchase any product they can put an enquery, delere will get that enquery throgh a mail also it will updated on Admin Side also

• Original LOGO :
• Our LOGO :

Tech-Stack:

• React.js
• React Routing
• React Redux
• React Redux Thunk
• Eexpress
• Mongodb
• CSS
• HTML
• Chakra UI Library
• Firebase

Glimpse and Screenshots of our cloned website:

Navbar:

• This is the landing page of our website. Clicking an option on the Navbar will redirect to the respective page.

-

Home Page:

• The images on the home page are linked to all Pages. Hence clicking on it will ensure successful redirection to the next Page.

Footer bar:

• Here we have functions such as Indiamart official social media link, contacts, policies, and information. account, and address.

Signup:

• Here we have a Modal Function on any page when users click on signup they get a popup on the screen .
• User can Create account ny filling Signup Form

Login page:

• Here we have a Modal Function on any page when users click on Login they get a popup on the screen. If the user is registered with the website, only then he/she can log in with their respective email id & password.
• User can Login with regestered email ID

Product Page:

Pdoduct Detailes Page:

Admin:

• Technically Help is the last page developed for the best User Interface UI smooth Operations. https://trademar4.netlify.app/

trademart's Issues

do all Redux section of Authentication with firebase

• get all data from firebase
• store all users
• implement deletion user from firebase

Functionalities of sign up and login

• implement fire base
• implement firebase in signup
• implement firebase in signup

product brand box

Category1 : Construction

• Design
• Responsiveness
• Data filling

Admin page

• admin dashboard
• product listing
• product updation or deletion
• save user credentials
• page design

Product Details Page

• productImage
• productDetails
• related categories
• deler details
• responsive

login and signup page

• create login ui
• create sign up ui
• make it a pop up

product boxes

Footer

Create Cart Page

• create new Route
• create basic u i of cart page
• try to add responsiveness

Cities section

• Design
• Responsive

Navbar

• Navbar Design : Desktop
• Adding Nev-buttons
• Navbar Design : Tablet
• Navbar Design : Mobile

deployed json server

• collect product data into db.json
• deploy it on vercel

add .env and protect Firebase credential

• add .env file
• add all imprtent key in side it

Functionality of Cart Page

• Add Product into cart page
• update the Qty
• Delete Pro from cart
• Make emty after order placed

Hero Section

• Banner : Desktop Screen
• Banner : Tablet Screen
• Banner : Mobile Screen

MegaMenu

• Design
• Responsive
• Data Filling

Category1 : Medicines

• Design
• Responsiveness
• Data filling

Category1 : Electronics

• Design
• Responsiveness
• Data filling

SearchPage

• fetch total product details
• make product details dynamic
• make related product dynamic
• sidebar
• show product in
• grid
• redirect to details page
• make responsive

Project Review

Review Comments

• UI Aspects

  • Pros

    • UI looks descent
    • many number of components are present.
    • Functionality wise , it is rich in functionalities.
    • wireframing looks good.
    • Redux arch is used correctly.

  • Cons

    • Localization is not done correctly
    • No client side data validation
    • Some links are broken .
    • Not much comments are present in code.

• Overall Comments

  • Little more focus on back end could have been great .
  • some of the components from UI could have been reduced and that much effort could have been given to back end side development .
  • coding standard , functionality all are maintained at a good quality .
  • use of git is done very good , design patterns are good .
  • no of components could've been reduced and those efforts could've been utilized on making the components working .
  • Next time focus on workable features rather than more no of features .
  • Don't keep any commented code.

Brand cards

• Design
• Responsive

Create logout And use Localstorege

• implement Signout
• use Localstorege to Storesign in user detailes