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. Project 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 that reflect my progress and experiments in frontend development. Each folder is dedicated to specific tools and technologies, with the goal of building clean, functional, and responsive web applications.

Project Structure

The repository is organized into four main sections:

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)

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 project folder:

    cd React

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:

React

Next.js

TailwindCSS

ShadCN UI (planned)

Get in Touch

You can reach out to me;

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