ZARA Fashion is a Clothing website. ZARA Fashion is one of the e-commerce websites working in India

Overview

Introduction

ZARA Fashion is a Clothing website. ZARA Fashion is one of the e-commerce websites working in India. Launched in Galicia, Spain in 1975. ZARA slowly expanded its empire in the rest of the country and later in Portugal in 1988 and the year after that- in 1989 ZARA made it to the United States of America.

Let's walk you through some snapshots of the cloned site

Sign Up Page

Here the user has to fill all mandatory fields with valid details to create an account. After filling all the fields, if the user clicks on Create Account, the account will be created.

Sign in Page

This is Log-in/ sign-in page, where users can enter their account by entering user credentials, if the user gives the wrong user credentials, the alert will be displayed. and if the user doesn't have an account or wanted to create another account he can click on Create Account button, then it will navigate the user to the register / sign-up page.

HomePage

On the home page, the big hero picture you can see below represents the particular category type of clothes, similarly, can u see different category types every 2 seconds, since all the category types are kept in 2 seconds time intervals.

Navbar

The blow picture is the navbar, which has 3 sections and in each section, we have multiple categories/subcategories, if we click on any one of them, the user gets navigated to the Product Page.

Product Page

here on the product page user can go through all the products and if the user wanted to know complete product details or wanted buy he can click on any product, then the user gets redirected to the product details page.

Product details page

if the user wanted to buy or wanted to add the product to the cart he can click on the “Add to Cart” button. and the count of the cart products will increase, you can see that on the right top page in the Navbar.

Cart page

Finally, the user can order them by clicking the “Continue Payment” button on the bottom right corner of the page.

Challengers we faced and how we resolved them

→ React was fairly new to us and thus it became a challenge to merge the code and solve the conflicts. → Another problem was the integration of the front-end and back-end which was a little bit challenging to do but we did that successfully. We tried our best and did the job.

Learning from the Project

→ In this construct week project, we have used the import-export functionality to export and import the navbar and footer section, it gave the learning to reuse the same code on different pages without complication. → Using the ES6 standards in the code base has optimized our program and made it shorter and more interactive.

Tech stack that we used in this project:-

  • React.js
  • Node.js
  • Express.js
  • MongoDB
  • HTML
  • CSS
  • JavaScript -ES6
  • Git
  • Heroku
  • Conclusion

    It was a wonderful experience working with the team to make the Clone of the ZARA fashion clothing site, collaboratively we created and made the clone exactly work as the real website works from the home page to the payment successful page. We will work on the project to improve it to add more functionality. In the last, the entire team thanked Masai School for giving us this wonderful opportunity to work on this Project.

    You might also like...
    Set up a modern web app by running one command.

    Create React App Create React apps with no build configuration. Creating an App – How to create a new app. User Guide – How to develop apps bootstrapp

    Create React App - Set up a modern web app by running one command.
    Create React App - Set up a modern web app by running one command.

    Create React App - Set up a modern web app by running one command.

    Simple React-Native boilerplate code in Typescript for getting started with a new project quickly. It has all the essentials that one would require in a project.

    react-native-boilerplate-typescript Simple React-Native boilerplate code in Typescript for getting started with a new project quickly. It has all the

    Creates a Module Federation applcation, API server, or library based on one of multiple different templates.

    create-mf-app Creates a Module Federation applcation, API server, or library based on one of multiple different templates. npx create-mf-app These pr

    Your One-Stop solution for a full-stack universal Redux App!
    Your One-Stop solution for a full-stack universal Redux App!

    reactGo 한글 공식문서 Your One-Stop solution for a full-stack app with ES6/ES2015 React.js featuring universal Redux, Redux Thunk, React Router, Hot reloadi

    React + Redux + Firebase + Webpack + React Hot Loader 3 + React Router in one boilerplate

    Firebase 3.0 Starter using React Redux This is a Firebase 3.0 start using React and Redux. It uses the latest version of libraries, including the bran

    This application is being constructed by combining small open source demos into one big application
    This application is being constructed by combining small open source demos into one big application

    Live Demo on Heroku If this doesn't work, it's probably because it exceeds Heroku's 500MB memory quota for the free tier. Sorry about that. It does wo

    The all-in-one starter kit for building platforms on Vercel

    Platforms Starter Kit The all-in-one starter kit for building platforms on Vercel. Introduction · Guide · Demo · Contributing Deploy Your Own Read the

    All-in-one solution for configuring ESLint in all of your projects
    All-in-one solution for configuring ESLint in all of your projects

    ✨ All-in-one solution for configuring ESLint in all of your projects ✨ Before you start The README on main branch can contain some unreleased changes.

    Owner
    Mohak Tripathi
    Passionate and creative Full Stack Developer having proficiency in MERN Stack. Excited about developing user-centric web applications
    Mohak Tripathi
    A Group Project for creating an E-commerce Website with MERN stack

    eCommerce platform built with MERN stack (MongoDB, ExpressJS, ReactJS, Nodejs) Table of Contents Table of Contents Demo videos Purpose Project URL: Fe

    Van Nguyen Nguyen 13 Nov 8, 2022
    Next-boilerplate - Basic Next.js boilerplate ready to use in any type of websites

    Basic Next.js boilerplate ready to use in any type of websites. View demo » My L

    Matheus Alvarenga de Oliveira 48 Jun 29, 2022
    Template folder for creating websites using the React library.

    esgi-react-template Template folder for creating websites using the React library. Requirements Node.js NPM Or Docker Docker Compose GNU/Make (optiona

    null 3 Jun 3, 2022
    Template for Crypto Websites. Source code for ElonCatMoon.com

    Crypto Website Template This is the source code for ElonCatMoon. This website is written with react.js. I have it hosted on Netlify if you have any qu

    Toby 6 Jan 2, 2023
    Clean Typescript React project with working Storybook using Yarn

    Getting Started with Create React App This project was bootstrapped with Create React App. Clone this repository To clone this repository, use the fol

    Mads Skov Schiellerup 1 Nov 3, 2021
    React + Redux starter kit / boilerplate with Babel, hot reloading, testing, linting and a working example app built in

    A comprehensive starter kit for rapid application development using React. Why Slingshot? One command to get started - Type npm start to start develop

    Cory House 9.8k Dec 22, 2022
    TypeScript basics, Compiler & Configuration, working with Next-gen JS Code, Classes & Interfaces;

    TypeScript basics, Compiler & Configuration, working with Next-gen JS Code, Classes & Interfaces; Advanced Types & TypeScript Features, Generics, Decorators; Full Project culminating this learning adventure; Working with Namespaces & Modules, Webpack & TypeScript, Third-Party Libraries & TypeScript.; React + TypeScript, NodeJS + TypeScript

    Debora Schuch da Rosa 0 Dec 27, 2021
    Personal Website UI Template using React-TypeScript. I hope, it will be helpful for your personal website that showcases your work as a software developer.

    Personal Website Template Personal Website UI Template using React-TypeScript Class components Personal website can be about anything you want, includ

    Sayan Bhattacharyya 9 Sep 16, 2022
    Math Magicians is a website for performing basic maths calculations, This website is built using REACT and JavaScript libraries.

    Math Magicians Math Magicians is a website for performing basic maths calculations, This website is built using REACT and JavaScript libraries. Screen

    Ranjeet Singh 12 Oct 20, 2022
    NextJS E-commerce starter kit with Sanity.io and Stripe API 🛍

    ?? Next.js Sanity E-commerce Starter Kit A Next.js E-commerce app with Sanity.io and Stripe API. Built with TailwindCSS framework & SASS CSS extension

    Lougie Quisel 11 Dec 29, 2022