Skip to content

sahilzalte/365-DAYS-365-CODES

BranchesTags

Repository files navigation

365 Days 365 Codes ♑

This project is licensed under the MIT License. You can read the full license here:
365 Days 365 Codes License

📊 Progress Tracker
Here's a quick look at my progress over time:

  • Days Completed: 215/365
  • Languages Practiced: HTML, CSS, JavaScript, React.js, Node.js, MongoDB, Express.js, Tailwind CSS, Next.js
  • Current Completed: MERN Stack
  • Current Focus: Revision of MERN Stack + Full-Stack Concepts

Welcome to my 365 Days 365 Codes project! 🚀 This repository is a collection of daily coding challenges and solutions that I have worked on over the span of 365 days. The goal of this project is to improve my problem-solving skills, learn new algorithms, and enhance my coding proficiency.

Project Highlights

  • 🌱 Growth: Every day, I tackle a new challenge to strengthen my skills in different areas like Data Structures, Algorithms, and Web Development.
  • 💻 Technologies Used: HTML, CSS, JavaScript, MERN Stack, and more!
  • 🌍 Objective: To solve one coding problem every day for 365 days.

🚀 Project Overview

  • Objective: Push myself to solve a new coding problem each day for 365 days.
  • Technologies Used: HTML, CSS, JavaScript, MERN Stack.
  • Challenges: Covers topics like algorithms, data structures, mathematics, and building functional web applications.
  • Repository Structure:

Daily Progress Log

  • HTML Development Initiated.
  • Day 1: Basic Introduction. 🌱
  • Day 2: Creating Our First Website. 🌍
  • Day 3: Adding External Files to index.html (like Script.js or Style.css). 📄
  • Day 4: Heading Tags + Basic Bookmarks Website. 🖥️
  • Day 5: Working with Images, Tables, and Lists. 📸
  • Day 6: Learning SEO and Core Web Vitals in HTML. 📶
  • Day 7: Forms and Input Tags in HTML. 📄
  • Day 8: Inline and Block Elements in HTML. 🚩
  • Day 9: IDs and Classes in HTML. 🏛️
  • Day 10: Video and Audio Tags in HTML. 📻
  • Day 11: Semantic Tags in HTML.
  • Day 12: Exercise 1 - Media Player Using HTML Only.
  • Day 13: Entities, Code Tag, and New Features.
  • HTML Completed Successfully.
  • CSS Development Initiated.
  • Day 14: Basic Introduction to CSS.
  • Day 15: Inline, Internal, and External CSS.
  • Day 16: History of CSS and File Creation Using AI.
  • Day 17: CSS Selectors - Definition and Usage.
  • Day 18: CSS Box Model.
  • Day 19: CSS Fonts, Text, and Colors.
  • Day 20: Exercise 2 - CSS Code to Style a Paragraph.
  • Day 21: CSS Specificity & Cascade.
  • Day 22: CSS Sizing Units.
  • Day 23: CSS Display Property.
  • Day 24: CSS Shadows and Outline.
  • Day 25: Styling Lists in CSS.
  • Day 26: CSS Overflow.
  • Day 27: Exercise by ChatGPT.
  • Day 28: CSS Position.
  • Day 29: Exercise 3.
  • Day 30: Variables in CSS.
  • Day 31: CSS Media Queries.
  • Day 32: Solving Exercise 3 with Another Method.
  • Day 33: Exercise 4.
  • Day 34: CSS Float and Clear.
  • Day 35: More on CSS Selectors.
  • Day 36: CSS Multicolor Website Exercise.
  • Day 37: Exercise 5.
  • Day 38: CSS Flexbox.
  • Day 39: CSS Grid Property.
  • Day 40: Layout in CSS.
  • Day 41: Exercise 6.
  • Day 42: CSS Transform.
  • Day 43: Exercise 6 Solution.
  • Day 44: Exercise 7.
  • Day 45: Transition Effects in CSS.
  • Day 46: CSS Animation.
  • Day 47: Exercise 7 Solution.
  • Day 48: Exercise 8.
  • Day 49: CSS object-fit & Position.
  • Day 50: CSS Filters.
  • Day 51: Exercise 8 Solution.
  • Day 52: Basic Figma Introduction and Its Uses in Web Development.
  • Day 53: Netflix Clone Using HTML and CSS.
  • CSS Completed Successfully.
  • JavaScript Development Initiated.
  • Day 54: Introduction to JavaScript and Installing Node.js.
  • Day 55: JavaScript Variables and Objects.
  • Day 56: JavaScript Conditionals: if, else if, else Ladder.
  • Day 57: Loops in JavaScript.
  • Day 58: JavaScript Functions.
  • Day 59: Exercise 9.
  • Day 60: JavaScript Strings and Functions.
  • Day 61: Exercise 9 Solution.
  • Day 62: Exercise 10.
  • Day 63: JavaScript Array Loops and map | filter.
  • Day 64: Exercise 10 Solution.
  • Day 65: Exercise 11.
  • Day 66: JavaScript DOM.
  • Day 67: Accessing JavaScript Node Parent and Children.
  • Day 68: JavaScript - Selecting IDs, Classes, and More.
  • Day 69: Exercise 11 Solution.
  • Day 70: Exercise 12.
  • Day 71: Adding and Removing Elements in JavaScript.
  • Day 72: Exercise 12 Solution.
  • Day 73: Exercise 13.
  • Day 74: Event Bubbling & Event Listeners.
  • Day 75: JavaScript Callbacks & Promises.
  • Day 76: JavaScript async and await.
  • Day 77: Exercise 13 Solution.
  • Day 78: Exercise 14.
  • Day 79: Error Handling in JavaScript.
  • Day 80: JavaScript Classes & Objects with getters and setters.
  • Day 81: Exercise 14 Solution.
  • Day 82: Advanced JavaScript.
  • Day 83: Advanced JavaScript Interview Questions.
  • Day 84: Spotify Clone Using HTML, CSS, and JavaScript.
  • JavaScript Completed Successfully.
  • Node.js Development Initiated.
  • Day 85: Backend, Node.js, & npm.
  • Day 86: CommonJS vs ECMAScript Modules.
  • Day 87: Working with Files: fs and path Modules in Node.js.
  • NodeJs Completed Successfully.
  • Express.js Development Initiated.
  • Day 88: Introduced to Express.js.
  • Day 89: Learned about Response, Request, and Routes in Express.js.
  • Day 90: Middleware in Express.js.
  • Day 91: Exercise 15.
  • Day 92: EJS Template Engine in Express.
  • Day 93: Exercise 15 Solution.
  • ExpressJs Completed Successfully.
  • MongoDB Development Initiated.
  • Day 94: Installing MongoDB & MongoDB Compass.
  • Day 95: CRUD Operations in MongoDB.
  • Day 96: Installing Mongoose & Using It With Express.
  • Day 97: Exercise 16.
  • Day 99: Exercise 16 Solution.
  • MongoDB Completed Successfully.
  • Tailwind CSS Development Initiated.
  • Day 98: Complete Tailwind CSS Tutorial.
  • Day 100: Exercise 17.
  • Day 101: Twitter UI Clone Using Tailwind CSS.
  • Day 102: Exercise 17 Solution.
  • Tailwind CSS Completed Successfully.
  • Hosting Initiated.
  • Day 103: Introduction to web hosting.
  • Day 104: How to host Node.js apps on Ubuntu.
  • Hosting Completed Successfully.
  • React Development Initiated.
  • Day 105: Introduction to React and Why We Use It.
  • Day 106: Components, Props, and JSX in React.
  • Day 107: Hooks and State in React.
  • Day 108: The useEffect Hook in React.
  • Day 109: The useRef Hook in React.
  • Day 110: Conditional Rendering and Rendering Lists in React.
  • Day 111: Exercise 18.
  • Day 112: Event Handling in React.
  • Day 113: Exercise 18 Solution.
  • Day 114: Todo List App Using React.
  • Day 115: React Router : Routing in React.
  • Day 116: The useContext hook in React.
  • Day 117: The useMemo hook in React.
  • Day 118: The useCallback hook in React.
  • Day 119: Handling Forms + Connecting React to Express Backend.
  • Day 120: The Redux Toolkit in React.
  • React Completed Successfully.
  • Next.js Development Initiated.
  • Day 121: Introduction to Next.js & File-Based Routing.
  • Day 122: Server Components in Next.js.
  • Day 123: <Script>, <Link>, and <Image> components in Next.js.
  • Day 124: Creating APIs in Next.js.
  • Day 125: Server Actions in Next.js.
  • Day 126: Middleware in Next.js.
  • Day 127: Auth.js - Authentication in Next.js.
  • Day 128: Dynamic Routes in Next.js.
  • Day 129: Layouts in Next.js.
  • Day 130: Password Manager using React.js, Tailwind CSS, Express.js, and MongoDB.
  • Day 131: Get Me A Chai – Patreon Clone in Next.js.
  • Day 132: Understanding next/navigation module in Next.js.
  • Day 133: SSR, SSG, ISR in Next.js.
  • Day 134: Environment Variables in Next.js.
  • Day 135: Styled JSX and Other Ways to Style in Next.js.
  • Day 136: Let’s Build a URL Shortener in Next.js 15.
  • Day 137: Let’s Build a Linktree Clone in Next.js 15.
  • Day 138: Deploying Our Next.js App to Vercel.
  • Next.js Completed Successfully.

MERN Stack completed successfully with MongoDB, Express, React, Node.js, and Next.js.

Project Work

  • Project 1: Twitter Clone Using Tailwind CSS

    • Day 139: Today, we created the left and right panels of the Twitter layout and added icons to the left sidebar.
    • Day 140: Completed all components and finalized the project.
    • Day 141: Deployed the Twitter Clone on Vercel

  • Project 2: iTask - Todo App Using React and Tailwind CSS

    • Day 141: Today, we created a minimal Todo app with add, edit, delete, and complete features using React, Tailwind CSS, and localStorage.
    • Day 142: Today, we completed all components and Deployed the Todo App on Vercel

  • Project 3: Password Manager using React, Tailwind CSS, MongoDB & Express.js

    • Day 142: Today, we created the Navbar.jsx and Manager.jsx UI with basic functionalities like add, delete, save to localStorage, and styled input fields using React and Tailwind CSS.
    • Day 143: Completed and deployed the responsive Password Manager on Vercel with local & MongoDB versions. Added footer, icons (copy, hide, delete, add, save).

  • Project 4: Get Me A Chai – Patreon Clone using Next.js, Tailwind CSS, MongoDB & Razorpay

    • Day 144: Today, we created the Login page and Main page UI. Arranged icons properly, implemented basic logic to add GitHub account integration to the app.
    • Day 145: Today, we implemented authentication, created the dashboard, added dynamic routes, integrated the Razorpay payment gateway, and set up the user profile.
    • Day 146: Added the .env file and Razorpay keys, and created a new database named chai.
    • Day 147: Integrated razorpay with MongoDB and fetched data using a callback. Also, improved userInteraction.js for better structure and functionality.
    • Day 148: Made the site fully responsive for mobile devices and integrated dynamic payment methods. Users can now securely access their Razorpay ID. Finalized all features and completed the project successfully.

  • Project 5: URL Shortener using Next.js, Tailwind CSS, MongoDB, and Postman

    • Day 149: Today, we created the basic UI design for all pages, added dynamic routes, and configured environment variables.
    • Day 150: Built UI, added dynamic routes, set up env variables, completed backend, tested with Postman & local MongoDB, and finalized the project locally.

  • Project 6: Linktree Clone using Next.js, Tailwind CSS, MongoDB

    • Day 151: Today we created all pages, added images and buttons, and built a well-structured UI with only the Navbar generated. MongoDB added, environment variable added.
    • Day 152: Today completed project, added all backend functionality and dynamic routes in Next.js, integrated MongoDB, and tested using Postman.

Project Work Completed

Finalized Projects

All projects have been successfully completed and uploaded to their respective repositories.

  • React + Tailwind CSS projects are fully hosted and live.
  • Next.js projects are configured for local development and testing, with Postman for API testing and MongoDB for database management.

Revision Phase Begins

🔁 Recent Topics

  • Day 153: Learn Fetch API — making network requests, handling responses, and promises.
  • Day 154: Recursion — understanding recursive functions and their use cases.
  • Day 155: Error Handling in JavaScript — try-catch blocks, throwing errors, and debugging.
  • Day 156: Explored npm, learned about package.json & package-lock.json, understood dependencies management, versioning, and how Node.js handles module installation.
  • Day 157: Learn CommonJS and ECMAScript (ES) Modules in Node.js.
  • Day 158: Learn fs and path modules in Node.js.
  • Day 159: Learn GET requests, slugs, public folder, and Nodemon in Express.js.
  • Day 160: Learn Object-fit and Position in CSS.
  • Day 161: Learn Response, Request, and Routes in Express.js.
  • Day 162: Learn Middleware networking in Express.js.
  • Day 163: Learn EJS template engine in Express.js.
  • Day 164: Learn CallBack and Promises in JavaScript.
  • Day 165: Learn async and await in JavaScript.
  • Day 166: Learn Hooks and States in React.
  • Day 167: Learn props syntax in JSX in React.
  • Day 168: Learn useRef in React.
  • Day 169: Learn Event Handling in React.
  • Day 170: Learn Variables in CSS.
  • Day 171: Learn the basics of Figma — just enough to understand it for learning and project purposes.
  • Day 172: Learn CSS Overflow.
  • Day 173: Learn To Create a Basic 404 Page In React by JavaScript.
  • Day 174: Learn Animations in Tailwind And Created Simple Installation Guide.
  • Day 175: Learn Simple Vue 3 Example From ChatGpt.
  • Day 176: Simple Example of Reversing a Text in Vuejs From ChatGpt.
  • Day 177: Learn a Simple Hooks of React.
  • Day 178: Create a Simple Portfolio using html,CSS only.
  • Day 179: Learn JWT Authentication with Role-Based Access
  • Day 180: Learn User Authentication with JWT.
  • Day 181: Learn CRUD Operations on Products.
  • Day 182: Simple Todo App with mern.
  • Day 183: Created a simple Fetch API call in JavaScript.
  • Day 184: Getter and Setter Use in JavaScript.
  • Day 185: useRef Hook in React.
  • Day 186: Event Handling in React.
  • Day 187: File Based Routing in Next.js.
  • Day 188: Server Components Work in Next.js.
  • Day 189: API Routes in Next.js.
  • Day 190: use server and use client in Next.js.
  • Day 191: Routes Handling using use client Component in Next.js.
  • Day 192: Dynamic Routing in Next.js.
  • Day 193: Middleware Concept in Next.js.
  • Day 194: Link , Script ,Image Components in Next.js.
  • Day 195: auth.js - Authentication in Next.js.
  • Day 196: 404 Page And Dynamic Routes in Next.js.
  • Day 197: Layouts in Next.js.
  • Day 198: next/navigation , next/useRouter in Next.js.
  • Day 199: SSR - SSG - ISR in Next.js.
  • Day 200: .env & .env.local Environment Variables in Next.js.
  • Day 201: Components rendering using UseEffect in React.js.
  • Day 202: useMemo Hook and Expensive Computation in React.js.
  • Day 203: Conditional Rendering in React.js.
  • Day 204: useCallback Hook in React.js.
  • Day 205: useContext Hook in React.js.
  • Day 206: React-Router-Dom use in React.js.
  • Day 207: Style jsx use in Next.js.
  • Day 208: React-Redux Toolkit in React.js.
  • Day 209: useRef Hook in React.
  • Day 210: Forms Handling & Connecting React to Express Backend.

  • Project 7: E-Commerce Website for electronics using Next.js, Tailwind CSS, MongoDB, Clerk, and Inngest

    • Day 211: Overview of the Project – Generated full technical documentation covering architecture, stack, workflows, and key components.
    • Day 212: Initial Next.js e-commerce setup with Clerk authentication, project structure, env configs, global styles, routing, and basic UI for products, cart, orders, and seller dashboard.
    • Day 213: Completed all UI work, integrated Clerk for Google Sign-In, and added API keys to the .env file.
    • Day 214: Set up MongoDB database and cluster for data storage and implemented login and logout functionality.
    • Day 215: Today we created Inngest functions to sync Clerk user events (create, update, delete) with MongoDB.

Getting Started.

To explore the solutions, please follow these steps:

  1. Clone the repository to your local machine using the following command: 
    git clone https://github.com/sahilzalte/365-DAYS-365-CODES.git

Contact Information

You are welcome to reach out via my professional contact form or connect with me on various social platforms.

Connect with Me

📊 GitHub Activity Analytics

Alt

If you find this content helpful, please consider giving a star to the GitHub repository.

About

Welcome to my coding journey! 🚀 Code every day for 365 days.

github.com/sahilzalte/365-DAYS-365-CODES

Topics

react nodejs javascript css html express mongodb nextjs hosting postman ejs promise-api tailwindcss reacttoastify

Resources

Readme

License

MIT license
Activity

Stars

2 stars

Watchers

1 watching

Forks

0 forks
Report repository

Releases

No releases published

Packages

No packages published

Languages