Kasim Lohar's Full Stack Journey

Welcome to my MERN Full Stack Journey repository! This repository documents my learning process throughout the MERN Full Stack course. It is organized into multiple sections, including backend projects, CSS exercises, HTML demos, JavaScript fundamentals, a major full-stack project, and various React applications. This documentation is designed for fellow developers and serves as a personal reference.

Table of Contents

• Backend Projects
• CSS Projects
• HTML Projects
• JavaScript Projects
• Major Project
• React Projects
• Tech Stack
• License
• Contributing
• Contact

---

Backend Projects

The Backend folder contains a variety of projects that showcase different backend technologies and approaches. Each subfolder has its own README with detailed instructions. Notable projects include:

• EJSDir:
  A project using EJS templating with views and static assets. See its README.

• ExpressDir:
  A simple Express application. Check its README.

• FigletDir:
  A demonstration of using Figlet for text styling.

• Fruits:
  Modular JavaScript examples with individual modules for different fruits.

• Miscellaneous:
  Contains projects combining both backend and frontend techniques.

• Mongo & Mongo3:
  Projects focusing on MongoDB integration with Node.js, including examples of CRUD operations and data modeling.

  • Mongo3 README (if available)

• MyProject:
  A backend project with its own setup and usage instructions.

• Relationships:
  Exploring data model relationships. Refer to its README.

• SQLClass:
  A project demonstrating SQL integration, complete with a sample schema and EJS views.

• rest_class:
  A RESTful API example built with Express and EJS templating.

---

CSS Projects

The CSS folder is dedicated to CSS exercises and mini-projects, including:

• Bootstrap:
  Basic projects utilizing Bootstrap. (Bootstrap/index.html)

• CSS_Project:
  A mini-project featuring HTML, CSS, and JavaScript integration.

• CSS_part_2 to CSS_part_6:
  Progressive exercises and projects to practice and demonstrate CSS skills.

• Getting_Start:
  Projects designed for beginners.

• Mini Project CSS:
  A standalone CSS project showcasing design and layout skills.

---

HTML Projects

The HTML folder includes standalone HTML demos such as:

• Classroom.html:
  A demo page representing a classroom layout.

• portfolio.html:
  A personal portfolio page demonstrating layout and design.

---

JavaScript Projects

The JS folder comprises several projects focusing on JavaScript fundamentals and interactivity. These are organized by parts:

• Part_2 to Part_6:
  Each part includes an app.js and an index.html to demonstrate specific JavaScript concepts and functionalities.

---

Major Project

The Major Project is the highlight of my repository. This full-stack application is built using Node, Express, MongoDB, and EJS templating. It represents the culmination of my learning journey with the following features:

Notable Features:

• Dynamic routing using Express.
• MongoDB integration for persistent data storage.
• User authentication and interactive UI elements.
• Responsive design for an improved user experience.

Screenshots:

Installation & Usage:

1. Clone the repository.
2. Navigate to the Majorproject folder.
3. Run npm install to install all dependencies.
4. Run npm start to launch the application.
5. Open http://localhost:3000 in your browser.

---

React Projects 🚀

1. WeatherWise

A modern weather application built with React and Material-UI.

• Real-time weather data using OpenWeatherMap API
• Responsive design with Material-UI
• Dynamic backgrounds based on weather conditions
• Error handling and accessibility features
• View Project

2. React Playground

A comprehensive demo application showcasing React concepts:

• Multiple component demonstrations (TodoList, Comments, Counter)
• State management patterns
• Form handling with Formik
• Error boundaries and CSS Modules
• View Project

3. React State Class

Educational materials for React state management:

• Class and Functional components
• Hooks implementation
• State management patterns
• View Project

---

Tech Stack

• Backend: Node.js, Express, MongoDB, EJS, SQL (in select projects)
• Frontend: HTML5, CSS3, JavaScript (ES6+), React, Material-UI, CSS Modules
• Database: MongoDB, SQL
• APIs: OpenWeatherMap API
• Build Tools: Vite

---

License

This repository is distributed under the MIT License. See the LICENSE file for more information.

---

Contributing

Contributions are welcome! Please refer to the individual project READMEs for specific contribution guidelines.

---

Contact

For any questions or feedback, please contact:

Kasim Lohar
Email: kasimlohar2@gmail.com

---

This repository is continuously updated as I progress in my learning journey. Stay tuned for new projects and improvements!

---