Skip to content

Latest commit

 

History

History
92 lines (68 loc) · 2.58 KB

Documentation.md

File metadata and controls

92 lines (68 loc) · 2.58 KB
Raw

Documentation

Overview

To groom my skills in React & Javascript concepts, I pursue Sabka Bazaar use case with tech stack such as Webpack, React, React-Router, Sass etc. I have a created my own components from scratch to gain a better understanding of things under the hood.

  • No External or Component Library used
  • Custom webpack setup

Roadmap

Week 1

  • Atomic Design structure
  • Basic webpack Configuration
  • Learned Sass (Mixins, Variables, Nesting)
  • BEM structure in Sass
  • Header & Footer components

Week 2

  • Created Atoms (Buttons, Images etc.)
  • Created Section Component in Home Page

Week 3

  • Card & Sidebar Component in Product Page
  • BrowserRouter configuration for webpack & use in app
  • Worked on SignIn & Register Pages

Week 4

  • CartPage for Tablet & mobile
  • Dropdown on product page for navigating
  • Global State management using Context API (useContext/createContext hook)
  • Created a cart modal for desktop

Week 5

  • Carousel
  • Swipe functionality in carousel for touchscreens
  • Improvements in the UI & refactoring of the code
  • Deployment on netlify

Optimizations

What optimizations did I make in my code?

  • Global Sass Variables & Mixins for reusability
  • Created Custom hooks for reusable functions
  • Global state management (Context Api)
  • Implemeted DRY (Do not repeat yourself) principle
  • Making site accessible using Semantic Html

Features

  • Cart Modal for Desktop
  • Dropdown for mobile
  • Swipe functionality in carousel for Touchscreens
  • No scroll when using Cart Modal
  • Focus Trap
  • Use of title attribute (Tooltip) for text (Hover mouse over incomplete text)
  • Autocompletion/suggestion off for forms
  • Floating-labels
  • Customized scrollbar for chrome/safari

Lessons Learned

What are the learnings & challenges I faced while building this project?

  • Why semantic Html is important?
  • What is Atomic design structure & Why use them?
  • Create Webpack from scratch
  • React UI rendering Process
  • Accessibility
  • HashRouter or BrowserRouter. Which to Choose & configuration in webpack for both?
  • Use of CSS Grid in Card Component
  • matchMedia() method for mediaqueries in JS
  • Why should we use Custom Hooks?
  • Global State Management (Context API)
  • React Portal for Cart Modal
  • Focus Trap & why it is important?
  • Floating-labels (Input + Label)
  • onTouch events
  • Deployment on netlify (_redirects file)
  • Javascript concepts - ES6 & above (Optional Chaining, Template literals, Object.values etc.)

Learning in Progress

  • React Lazy-loading (Dynamic Import)
  • Suspense
  • Unit Testing (Jest & React Testing Library)