Study Mate

This repository showcases my journey in web development through various frontend projects. It includes work with JavaScript, React, TailwindCSS, TypeScript, and Next.js, along with other modern tools and frameworks. As I continue to grow, I will be experimenting further with ShadCN UI and other technologies.

Table of Contents

1. Introduction
2. Repository Structure
3. Features
4. Roadmap
5. Project Highlights
6. Installation
7. Technologies
8. Get In Touch

Introduction

Welcome to Study Mate! This repository contains a collection of projects and study notes that reflect my progress and experiments in frontend development. The repository is divided into Projects and Study sections.

The Projects section consists of mini projects and real world applications, while the Study section includes my personal notes, explorations, and learning journeys as I work with different technologies.

Repository Structure

The repository is organized into four main sections and four primary subsections:

Main Sections:
- Projects
- Study
- ShortNotes
- Mini-Challenges

Project Sections

This section is categorized into;

1. JavaScript Projects

• In this section, you will find projects created with vanilla JavaScript, which may also incorporate HTML, CSS, and sometimes Materialize css or TailwindCSS for styling.

  • Projects range from DOM manipulation to algorithms and logic challenges.
  • Folder: javascript/

2. React Projects

• This section includes mini React apps created during my learning journey and styled with TailwindCSS, Css Modules, Styled-components or SCSS

  • Explore React components, hooks, state management, and more.
  • Folder: react/

3. TailwindCSS Projects

• A collection of projects styled using the TailwindCSS utility-first framework.

  • Experience clean and responsive UI designs with minimal custom CSS.
  • Folder: tailwindcss/

4. TypeScript Projects

Projects utilizing TypeScript for building scalable and type safe applications. These projects often include integrations with React and other frameworks.

Folder: typescript/

5. Next.js Projects

Server rendered React applications built with Next.js, exploring features like static site generation (SSG), server side rendering (SSR), and API routes.

Folder: nextjs/

6. Upcoming: ShadCN UI Projects

• Projects leveraging the ShadCN UI library for elegant and reusable components.

• Folder: shadcn_ui/ (planned)

Study Section:

The Study section of this repository is a comprehensive collection of my personal notes, experiments, and deep dives into the key concepts of frontend development which is going to be organized in folders. The aim of this section is to document my learning journey and experiments with different tools, libraries, and frameworks. It is a place where I explore various concepts, techniques, and best practices to gain a deeper understanding of frontend technologies.

The Study section will be continuously updated as I progress through different stages of my learning.

Here’s how the Study section is organized:

1. JavaScript
2. Reacts
3. TypeScript
4. TailwindCSS
5. Next.js
6. ShadCN UI (Planned)
7. Testing
8. Version_Control

Additional Features of the Study Section:

• I'll add my own notes on common pitfalls, learning summaries, and important lessons learned along the way.
• I will add link to other tutorials, videos, or documentation that have helped me learn each topic.

Features

• Scalable Codebase: Projects built with TypeScript for type safety and scalability.

• Responsive Designs: Clean and mobile first UIs created with Tdifferent stylings

• Modern Frameworks: Leveraging Next.js for server side rendering and static site generation.

• Reusable Components: Planned use of ShadCN UI for consistent and elegant designs.

• Progressive Learning: Projects showcase a step-by-step mastery of frontend concepts.

Roadmap

• Deep Dive into TypeScript: Advanced types, generics, and decorators.

• Master Next.js Features: Implement server side rendering, API routes, and middleware.

• ShadCN UI Integration: Explore building reusable and visually appealing components.

• State Management Tools: Experiment with Redux, Zustand, and other libraries.

Installation

Clone the repo using:

    git clone https://github.com/Ehmkayel/study_mate.git

Navigate to the desired folder:

    cd Projects

Follow the instructions in the individual project folders for setup and usage.

Technologies

This repository leverages the following technologies:

• Core Languages: HTML, CSS, JavaScript, TypeScript

• Frameworks & Libraries:

  1. React

  2. Next.js

  3. TailwindCSS

  4. ShadCN UI (planned)

Get in Touch

You can reach out to me;

• Linkedin- Morufat-Lamidi
• Tiktok- Ehmkay
• Frontend Mentor - @Ehmkayel
• Twitter - @kamalehmk
• Gmail- Mail;