Frontend Development Learning Journey

This repository contains multiple projects showcasing various frontend development concepts and technologies I've learned. Each project focuses on different aspects of modern web development.

Projects Overview

1. Financial Dashboard

A vanilla JavaScript CRUD application for managing financial records.

Key Features:

• Add, edit, and delete financial records
• Sort data by different parameters
• Local storage integration
• Responsive table design
• Search functionality

Technologies Used:

• HTML5
• CSS3
• JavaScript (ES6+)
• LocalStorage API

2. React Router Practice

A React application demonstrating routing and state management concepts.

Key Features:

• Multiple page navigation
• Protected routes
• Dynamic routing
• Redux state management
• Error handling

Technologies Used:

• React 19
• React Router v7
• Redux Toolkit
• CSS3

3. SCSS Practice

A project focused on learning SCSS/Sass preprocessor concepts.

Key Features:

• Component-based styling
• Responsive design
• CSS architecture patterns

Technologies Used:

• SCSS/Sass
• CSS3
• HTML5

Key Learnings

JavaScript & DOM Manipulation

• Event handling and delegation
• LocalStorage for data persistence
• Dynamic table manipulation
• Form validation
• Sorting and filtering data

React Concepts

• Component lifecycle
• React Hooks (useState, useEffect, useRef, useReducer, useCallback, useMemo)
• Context API for state management
• Redux Toolkit implementation
• React Router for navigation
• Error boundaries
• Custom hooks

CSS/SCSS Features

• CSS Variables
• SCSS Mixins and Functions
• Nested selectors
• Color manipulation
• Responsive design patterns
• BEM methodology

State Management

• Local component state
• Global state with Redux
• Context API implementation
• Action creators and reducers
• State immutability patterns

Getting Started

Prerequisites

• Node.js (v14 or higher)
• npm/yarn package manager

Installation

# Clone the repository
git clone [repository-url]

# Install dependencies for React projects
cd react-router
npm install

# Start React development server
npm start

# For SCSS compilation (in scss_practice directory)
cd scss_practice
sass --watch styles.scss:styles.css

Project Structure

├── financial_dashboard/ # Vanilla JS CRUD Application

├── react-router/ # React Router & Redux Practice

├── react-practice/ # React Hooks & Context API

└── scss_practice/ # SCSS/Sass Learning Project