Giter VIP home page Giter VIP logo

aamirfarookh / global-tech Goto Github PK

View Code? Open in Web Editor NEW
4.0 1.0 0.0 87 KB

This is a full stack project inspired by the official website of Apple Inc. The tech stack used for the project is HTML, CSS and vanilla JavaScript on the front-end and Node, Express and MongoDB on back-end

Home Page: https://appleincclone.netlify.app/

JavaScript 17.55% HTML 58.72% CSS 23.73%
apple expressjs html-css-javascript nodejs responsive-layout authentication bcrypt-hashing-library ecommerce-website jwt-authentication

global-tech's Introduction

pricey-match-7148

GLOBAL-TECH

LOGO

This web app is an e-commerce website influenced by the official website of Apple Inc.

Features: Sign-in/Sign-up. Responsive Design. Functional User Interface. User Dashboard. Store. Cart. Checkout.

Tech Stack: HTML | CSS | Javascript | Node | Express | MongoDB

Areas Of Responsibility: Worked closely to optimize and implement the front and back ends. Set deadlines and project milestones for different issues and tasks. Authenticated user login system. Worked on authorization towards different routes. Worked on developing the user model and product model. Worked on different avenues such as users, products, and cart routes. Developed a fully functional user interface and developed a responsive website for all screen sizes.

An individual project built and executed in 5 days.

LIVE DEMO

https://appleincclone.netlify.app/

BACKEND DEPLOYED LINK

https://lazy-blue-cockroach-sari.cyclic.app/

SOME SNAPS

Home Page

Screenshot 2023-04-03 115330

Footer

Screenshot 2023-04-03 115438

Login Page

Screenshot 2023-04-03 115714

Store

Screenshot 2023-04-03 115544

Cart Page

Screenshot 2023-04-03 115812

global-tech's People

Contributors

aamirfarookh avatar

Stargazers

avatar avatar avatar avatar

Watchers

avatar

global-tech's Issues

User model and router

  • Create user Schema
  • Create login route
  • Create register route
  • Generate hashed passwords
  • Generate JWT tokens

Product model and router

  • Collect product data
  • Create product Schema and model
  • Create get route for products
  • Apply all the necessary filters on get route
  • Apply pagination
  • Implement cart functionality
  • Implement wish list functionality
  • Order history

Product page

  • Product page UI
  • Categories [mobiles,laptops,tv,accessories]
  • Sort by price
  • Filter by ratings
  • Apply pagination
  • Search functionality
  • Add to cart functionality

Register Page

  • Sign up page UI
  • send data to backend
  • redirect to login page

Cart page

  • Show products added in cart.
  • Show Cart Total
  • Show Quantity (including increment and decrement button)
  • Checkout Button
  • Remove Button
  • Responsive

Login page

  • Create UI for Login page
  • Fetch the data from backend
  • Approve login or throw error
  • If user not found redirect to register page

Landing page

  • Navbar with pop down menus
  • Main content with slideshow
  • Footer with all the necessary links.

Backend setup

  • Setup folder structure
  • setup backend application
  • connection to DB
  • Install all the dependencies

Profile page

  • User's personal info
  • change password functionality
  • Update profile functionality

Checkout page

  • navbar
  • total amount section
  • address details form
  • card details form. >> online payment
  • OTP authentication.
  • pop up of order successful/unsuccessful
  • Post data into orders route.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.