Digi Store is a personal e-commerce project built using the MERN stack (MongoDB, Express.js, React.js, Node.js). It offers a complete online shopping experience with secure order placement, admin management, email OTP verification, and QR code-enabled delivery tracking.

MongoDB : It is a NoSQL, document-based database used to store structured data such as products, orders, users, OTPs, and admin details. It provides flexibility in data modeling and scalability, and it's connected to the app through Mongoose, enabling schema validation and easy querying.

Express JS : It is a fast, minimal Node.js framework used for building the backend API. It handles all HTTP requests, routes, middleware for authentication, file uploads (via Multer), and connects the application to the MongoDB database. It plays a crucial role in managing user authentication, admin access control, and server-side logic.

React JS : It is used to build the entire frontend of Digi Store. It powers a responsive and dynamic user interface with component-based architecture, handling routing (via React Router), state management, and asynchronous operations like API calls. React also generates QR codes on the client side using libraries like qrcode.react, making delivery tracking user-friendly and instant.

Node.js : Node.js serves as the runtime environment for the backend. It runs the Express server, manages API endpoints, and handles asynchronous tasks like sending emails (via Nodemailer) and securely verifying tokens (using JWT). Using JavaScript on both the client and server sides ensures smooth integration and consistency throughout the stack.

---

About This Project

Component Structure (React.js)

• Component-based architecture using React to organize the frontend for both user and admin roles.
• User components include pages like Home, Product Listing, About, Contact Us, and User Order Page.
• Admin components include Order Dashboard, Product Manager, Slider Manager, and Staff Delivery Panel.

Order and Delivery System

• Users can only place an order after verifying their email via an OTP.
• Once verified, an order confirmation email is sent containing order details and a link with a QR code.
• Delivery staff scan this QR code and verify the order before updating its status to “Delivered”.

Email OTP Verification

• An OTP is sent to the user’s email address using Nodemailer before an order is confirmed.
• Only after entering the correct OTP can the user proceed with the order.
• Once verified, an email is sent with the order confirmation and tracking information.

QR Code Generation (Frontend)

• QR codes are generated on the frontend using a React-based QR code library.
• Each order gets a unique QR code linked to a page that displays product and order information.
• The delivery staff use this QR code to securely update the delivery status.

Admin Dashboard Features

• Admins can log in and access a dedicated dashboard to manage the store.
• They can view and update orders, add new products, edit or delete existing ones, and manage slider images.
• A delivery panel is also included where staff can scan QR codes and confirm deliveries.

Security and Authentication

• JWT Authentication ensures secure access for both users and admins with token-based session handling.
• bcrypt is used to hash user passwords and OTP codes before storing them in the database.
• Protected routes are applied throughout the backend to enforce role-based access control.

Search Functionality with Debouncing

• The search input on the product page supports debounced suggestions.
• As users type, real-time suggestions are shown without making excessive backend requests.
• This results in a faster and smoother user experience.

Cloudinary Integration for Image Management

• Cloudinary is used to upload and host product and slider images from the admin panel.
• Uploaded images are stored as URLs in MongoDB and loaded efficiently on the frontend.
• This enables faster page load times and reliable media delivery.

User Order Management

• Logged-in users can view all their previous orders on a dedicated page.
• Each order displays its status, product details, and tracking information.
• Ensures a complete post-purchase experience for users.

Responsive UI and Styling

• The entire site uses plain CSS for a clean and intuitive design.
• Both the user-facing site and admin dashboard are fully responsive across all screen sizes.
• Optimized for mobile, tablet, and desktop devices.

---

Skills Learned from this Project

Component Structure (React.js)

• Component-based architecture using React to organize the frontend for both user and admin roles.
• User components include pages like Home, Product Listing, About, Contact Us, and User Order Page.
• Admin components include Order Dashboard, Product Manager, Slider Manager, and Staff Delivery Panel.
• Libraries Used: React.js, React Router for navigation.

Order and Delivery System

• Users can only place an order after verifying their email via an OTP.
• Once verified, an order confirmation email is sent containing order details and a link with a QR code.
• Delivery staff scan this QR code and verify the order before updating its status to “Delivered.”
• Libraries Used: Nodemailer for sending emails, qrcode.react for generating QR codes.

Email OTP Verification

• An OTP is sent to the user’s email address using Nodemailer before an order is confirmed.
• Only after entering the correct OTP can the user proceed with the order.
• Once verified, an email is sent with the order confirmation and tracking information.
• Libraries Used: Nodemailer, bcryptjs for OTP hashing.

QR Code Generation (Frontend)

• QR codes are generated on the frontend using a React-based QR code library.
• Each order gets a unique QR code linked to a page that displays product and order information.
• The delivery staff use this QR code to securely update the delivery status.
• Libraries Used: qrcode.react for generating QR codes.

Admin Dashboard Features

• Admins can log in and access a dedicated dashboard to manage the store.
• They can view and update orders, add new products, edit or delete existing ones, and manage slider images.
• A delivery panel is also included where staff can scan QR codes and confirm deliveries.
• Libraries Used: React.js, React Router, Axios for API requests.

Security and Authentication

• JWT Authentication ensures secure access for both users and admins with token-based session handling.
• bcrypt is used to hash user passwords and OTP codes before storing them in the database.
• Protected routes are applied throughout the backend to enforce role-based access control.
• Libraries Used: jsonwebtoken for JWT authentication, bcryptjs for password and OTP hashing.

Search Functionality with Debouncing

• The search input on the product page supports debounced suggestions.
• As users type, real-time suggestions are shown without making excessive backend requests.
• This results in a faster and smoother user experience.

Cloudinary Integration for Image Hosting

• Cloudinary is used to upload and host product and slider images from the admin panel.
• Uploaded images are stored as URLs in MongoDB and loaded efficiently on the frontend.
• This enables faster page load times and reliable media delivery.
• Libraries Used: Cloudinary, cloudinary Node.js SDK.

User Order Management

• Developed an order management system where users can view and track their orders, complete with real-time updates on order status and tracking information.
• The order page displays detailed information including product names, quantities, prices, and order status updates such as "Pending," "Confirmed," "Shipped," and "Delivered."
• Users can also cancel their orders before confirmation, providing flexibility and control over their purchase decisions.
• Libraries Used: Axios for fetching order data, React.js for UI rendering.

Delivery Staff Integration

• Integrated a system where delivery staff can scan QR codes to confirm the status of orders, ensuring smooth and secure delivery tracking.
• Delivery staff receive a unique QR code for each order, which they scan to verify that the correct product is being delivered to the right customer.
• Once the QR code is scanned, the order status is updated automatically in the system, marking it as "Delivered," ensuring seamless communication between the user and delivery staff.
• Libraries Used: qrcode.react, Axios for API calls.

Responsive Design and UI/UX

• The entire site uses plain CSS for a clean and intuitive design.
• Both the user-facing site and admin dashboard are fully responsive across all screen sizes.
• Optimized for mobile, tablet, and desktop devices.
• Libraries Used: None (plain CSS for styling).

React State Management

• Used useState and useEffect hooks to manage dynamic product data and user interactions across multiple components.
• Ensured that the components update seamlessly based on user inputs, like adding items to the cart or updating order statuses.
• Handled state across components like the Product Page, User Order Page, and Admin Dashboard for real-time updates.
• Libraries Used: React.js (React hooks).

Component Reusability

• The project was built with a modular, reusable component structure to avoid redundancy.
• Components like ProductCard, OrderCard, and AdminProductCard are reused across different pages to reduce the amount of code.
• This modularity makes it easier to maintain the project as changes can be applied to the component in one place, reflecting across all instances where it’s used.
• Libraries Used: React.js.

API Integration and Data Fetching

• Integrated the backend with the frontend through RESTful APIs to fetch and display product details, order information, and user data.
• Learned to handle asynchronous API calls using async/await to fetch product data, order status, and user details.
• Managed API response errors to ensure smooth user experience, even in cases of failed API calls.
• Libraries Used: Axios for API requests, Express.js for backend API development.

Admin Dashboard and Role-Based Access

• Developed a secure Admin Dashboard that allows the management of products, orders, and delivery statuses.
• Implemented role-based access control, where admins can manage products and orders, but delivery staff only have access to delivery-specific functionality.
• Used JWT tokens to manage session and restrict access based on user roles.
• Libraries Used: React.js, React Router, jsonwebtoken for JWT.

Cloudinary Integration for Image Management

• Used Cloudinary for efficient image hosting and management for product images and slider images.
• Learned how to upload, store, and retrieve images efficiently to ensure faster load times and optimized storage.
• After uploading images to Cloudinary, implemented Multer and FS to delete the image files from the server, ensuring optimized server storage and avoiding unnecessary disk usage.
• Managed image URLs in MongoDB to dynamically link each product or slider image, enhancing storage efficiency.
• Libraries Used: Cloudinary, Multer, fs (File System), cloudinary Node.js SDK.

Security and Data Integrity

• Ensured secure handling of user data using JWT for authentication and bcrypt for password hashing.
• Used secure token management to allow users to sign in and perform actions like placing orders and viewing past orders.
• Ensured that sensitive information like passwords and OTPs are hashed and never stored in plaintext.
• Libraries Used: jsonwebtoken, bcryptjs.

Handling User Inputs and Forms

• Implemented forms for user registration, login, product ordering, and admin login.
• Validated user input to ensure correct data entry, especially for fields like email addresses, OTPs, and product details.
• Managed form submissions using React hooks and ensured data was sent correctly to the backend via API calls.
• Libraries Used: React.js, Axios for form handling and data submission.

User Authentication and Session Management

• Learned to implement JWT authentication for both users and admins, ensuring secure login and session handling.
• Managed token expiration and re-authentication processes for secure access to protected routes.
• Utilized cookies to store JWT tokens on the frontend for maintaining the login state.
• Libraries Used: jsonwebtoken, cookie-parser.

Real-Time Updates and Notifications

• Implemented real-time updates for order status changes, so users and admins are notified instantly when their order status changes.
• Developed a notification system to inform users about order confirmations, shipping updates, and delivery statuses.
• Used email notifications for sending OTPs and order confirmations to users.
• Libraries Used: Nodemailer for email notifications.

This weather web application allows users to search for weather details by simply entering a city name. Once a city is searched, the app provides comprehensive information such as the city and country, current temperature, feels-like temperature, and a brief weather description with an icon, along with the current date and time. Users can also access important weather metrics such as sunrise and sunset times, humidity, wind speed, cloud cover, and atmospheric pressure. Additionally, there’s an option to view temperatures in either Celsius or Fahrenheit, allowing for a personalized weather experience.

The standout feature of this app is the 5-day weather forecast. It provides the maximum and minimum temperatures for each day, along with weather descriptions and corresponding images. The forecast is updated every 3 hours, giving users a detailed look at how the weather will change throughout the next five days.

---

About This Project

1. React Components Structure:

• Component-Based Architecture: The project is built using React with just two main components: Card and ForecastCard.
• Card Component: Displays the current weather information, including city name, temperature, description, humidity, wind speed, etc.
• ForecastCard Component: Shows the 5-day weather forecast, displaying the maximum and minimum temperatures and weather descriptions for each day.

2. Weather Data Fetching:

• API Integration: The app fetches weather data from the OpenWeather API, which includes current weather details and a 5-day forecast based on the city entered.
• Dynamic Updates: The weather details are updated dynamically each time a user searches for a new city, ensuring the data is always current.

User Interface and Styling:

• Plain CSS Styling: The app uses plain CSS for styling, with an external .css file to ensure a clean, modern design. This includes custom styling for the Card and ForecastCard components.
• Responsive Design: The app layout is responsive, ensuring the app looks great on mobile and desktop devices, adapting smoothly to different screen sizes.

3. Weather Metrics Display:

• Current Weather Info: The Card component displays the current weather, including temperature, feels-like temperature, and key metrics like wind speed, humidity, and pressure.
• 5-Day Forecast: The ForecastCard component provides a detailed forecast for the next five days, showing maximum and minimum temperatures along with weather descriptions and icons.

4. Temperature Unit Toggle:

• Celsius/Fahrenheit Switch: The app allows users to toggle between Celsius and Fahrenheit temperature units, providing a customized experience based on user preferences.

---

Skills Learned from this Project

1. React State Management:

• Dynamic Data Handling: Used useState and useEffect hooks for managing the weather data dynamically. Each time a user searches for a city, the components (both Card and ForecastCard) update automatically based on new data from the OpenWeather API.
• Component Reusability: By structuring the project with reusable components, I was able to keep the code clean and efficient. Both Card and ForecastCard components share similar logic for displaying weather data, making them easily reusable for different sections of the app, such as displaying the current weather or forecast.

2. Component Reusability:

• Modular Design: Both components follow a modular approach, allowing for the reuse of similar structures and logic. For example, the ForecastCard component can be reused across different sections if the design were to change, and Card can be updated or reused for other weather-related functionalities.
• Efficient Updates: Since both components share similar code patterns, any changes made to one component (e.g., styling or data parsing) can be applied easily to the other, ensuring a more maintainable codebase.

3. API Integration:

• Fetching Weather Data: Integrated OpenWeather API to fetch current weather and forecast data. This helped in learning how to handle asynchronous operations with async/await to ensure smooth fetching and display of data.
• Handling Dynamic Responses: Used JavaScript functions to format and parse the response from the API, handling different weather conditions and ensuring consistent display of data in both components.

4. UI/UX Design:

• Plain CSS Styling: Styled the app using plain CSS linked through an external stylesheet, ensuring consistency and a smooth user experience across components.
• Responsive Layout: Designed the layout to be fully responsive, with adaptive features for both mobile and desktop views, ensuring that weather data is displayed clearly on all devices.

5. Event Handling and Dynamic Updates:

• Search Functionality: Implemented the search feature to allow users to search by city and view updated weather data in real-time.
• Real-Time Data Updates: Ensured that when the user changes the city, the Card and ForecastCard components automatically update with the new weather data, providing a smooth user experience.

6. Weather Data Parsing:

• Data Formatting: Parsed API responses to extract relevant weather details (e.g., temperature, wind speed, etc.), and formatted them for display in both the Card and ForecastCard components.
• Date and Time Management: Handled date and time formatting to display the correct time and date in the weather and forecast sections, ensuring users get accurate, localized information.

This project is a functional and interactive Todo application built using React, with features such as task creation, filtering, drag-and-drop functionality, and local storage integration. It allows users to create, mark as completed, filter tasks by completion status and repeat frequency (daily/weekly), and drag-and-drop tasks to reorder them.

The application features task repeat functionality based on daily or weekly intervals. Users can filter tasks by their completion status or their repeat frequency. A user-friendly interface is designed to handle tasks on both desktop and mobile devices, providing an interactive and smooth experience.

---

About This Project

1. React Components Structure:

• The project is built using React, where different components handle specific parts of the Todo app.
• Components include TodoList, TodoItem, TaskInput, and Filters, each managing their own state and logic.
• useState and useEffect hooks are used for state management, ensuring smooth updates and rendering.

2. Tailwind CSS Styling:

• Tailwind CSS is used for styling, providing a clean and modern design using utility-first classes.
• The design is responsive, adjusting seamlessly across mobile and desktop views.
• Hover effects and transitions are applied to interactive elements for better user experience.

3. Task Management Functionality:

• Users can add tasks, edit tasks, and mark them as completed or delete tasks.
• Tasks have properties like title, description, and repeat frequency (daily/weekly).
• When tasks are marked complete, they get a visual indicator and can be toggled back to incomplete.

4. Task Filtering and Sorting:

• Tasks can be filtered based on completion status: All, Completed, or Incomplete.
• Users can filter tasks by their repeat frequency (Daily, Weekly, or All).
• Sorting tasks helps users find and prioritize their tasks based on their status or frequency.

5. Drag-and-Drop Task Reordering:

• The app allows drag-and-drop functionality to reorder tasks, enabling easy organization.
• Users can simply drag tasks to different positions on the list for dynamic adjustments.
• Visual feedback during dragging ensures a smooth and intuitive reordering experience.

6. Local Storage Integration:

• Task data is stored in local storage, ensuring tasks persist across browser sessions.
• Changes (add, edit, delete) are automatically saved to local storage, and data is loaded on app initialization.
• This feature makes sure users don’t lose their tasks even if they close the browser or refresh the page.

7. Responsive User Interface:

• The app’s layout is fully responsive and adapts to various screen sizes using Tailwind’s grid system.
• The design maintains usability and readability on both mobile and desktop devices.
• Interactive elements like buttons and filters adjust in size and positioning based on screen width.

---

Skills Learned from this Project

1. React State Management:

• Learned how to use React's useState hook to manage dynamic states and update the UI efficiently.
• Handled multiple complex states in a single component to create an interactive, dynamic experience.

2. JavaScript Functionality:

• Implemented task-related logic such as adding, deleting, toggling completion, and resetting repeat tasks.
• Developed a drag-and-drop feature using React's event system and managing dynamic styles to provide visual feedback during dragging.

3. Handling Local Storage:

• Gained experience in integrating local storage with React, allowing data persistence between sessions.
• Implemented helper functions for reading and writing data to local storage.

4. UI/UX Design:

• Designed a user-friendly interface with clear labeling and visual cues (e.g., hover effects, disabled buttons) to enhance the overall user experience.
• Ensured responsiveness for both desktop and mobile views.

5. Filtering and Search:

• Implemented multiple filters to refine task views based on completion status and repeat frequency.
• Applied filtering logic dynamically based on user input, improving the usability of the app.

6. Event Handling and Dynamic Updates:

• Used React's event system to handle user interactions such as task completion, deletion, and dragging, ensuring seamless updates to the task list.

7. Project Organization:

• Organized React components and helper functions to ensure a maintainable and clean project structure.
• Separated concerns (task logic, filter logic, local storage) into distinct, easy-to-manage units of code.

This project is a simple, interactive Tic Tac Toe game built using HTML, CSS, and JavaScript. It allows both single-player and two-player gameplay modes.

In two-player mode, two users take turns making moves, with a dynamic game board and functionality to declare the winner or a draw. The game can be played directly in the browser, providing an engaging and responsive experience for users on both desktop and mobile devices. A restart button is included, allowing players to reset the game after each round.

In single-player mode, the user competes against the computer, which follows a basic random move algorithm to simulate an opponent. The player makes their move first, and then the computer selects an available cell for its turn. The game checks for win conditions, draw scenarios, and updates the board dynamically after each move. Like two-player mode, single-player mode also includes a restart button to easily reset the game and play again. The interface is designed to be intuitive, providing clear feedback on the current game status, whether it's a win, loss, or ongoing game.

---

About This Project

1. HTML Structure:

• Created the basic structure using HTML5 for the game interface, including a Tic Tac Toe board and player information.
• Added options for selecting the game mode: single-player or two-player.
• Incorporated sections for displaying the current player's turn, game status (win, loss, or draw), and buttons to restart the game.
• Set up the grid using div elements, which are clickable for user interactions.

2. CSS Styling:

• Styled the game interface using CSS, ensuring it’s visually appealing and user-friendly.
• Used Flexbox to organize the layout of the game board and player info, maintaining a clean, structured look.
• Made the design responsive to work across various screen sizes, ensuring accessibility on mobile devices.
• Applied hover effects to the grid cells, giving immediate feedback to players.
• Customized the overall look and feel using colors, fonts, and borders to enhance the visual experience.

3. JavaScript Functionality:

• Implemented game logic to handle both two-player and single-player modes.
• For two-player mode, players alternate turns, and the game checks for win conditions after each move.
• For single-player mode, the player competes against the computer. The computer makes its moves randomly to ensure challenging but fair gameplay.
• Created functions to determine whether the game has been won, lost, or resulted in a draw.
• Used event listeners to capture player clicks and dynamically update the game board.
• Added a restart button to reset the game board and player statuses, allowing continuous play.

4. Game Logic:

• In two-player mode, players alternate between X and O, with the game checking for a winner after each move (horizontal, vertical, or diagonal).
• In single-player mode, the computer's move is simulated. After the user makes a move, the computer randomly selects a valid empty cell and places its move (either X or O).
• The game checks after each move whether either player has won or if there’s a draw.
• Players can easily restart the game, returning the board to its initial state.

5. Single-Player:

• The computer's move is randomly generated but ensures that it doesn’t make invalid moves (i.e., moves in already filled cells).
• The computer randomly selects a cell from the available ones, ensuring some level of challenge for the player.
• Provides an interesting and engaging challenge for users in single-player mode.

6. Interactivity:

• Players can click on the grid cells to make their moves.
• In single-player mode, the computer’s move follows the player’s move with a slight delay to create a more realistic gameplay experience.
• A restart button allows users to reset the game at any time.

---

Skills Learned from this Project

1. HTML5:

• Improved structuring of interactive web interfaces, managing layout and game controls.
• Gained experience implementing forms for user selection (game mode, restart functionality).

2. CSS:

• Enhanced skills in designing user-friendly and visually appealing interfaces with responsive layouts.
• Created dynamic, interactive visuals using hover effects and transitions for grid cells.

3. JavaScript:

• Implemented game logic to handle both two-player and single-player modes.
• Developed simple AI for the computer opponent in single-player mode using random number generation and move validation.
• Improved understanding of event-driven programming, dynamically updating the DOM based on user actions.
• Implemented functions to check for game outcomes (win, draw, or ongoing) after every move.

4. Game Development Basics:

• Gained knowledge of building turn-based games with multiple player modes.
• Implemented logic to check for winning conditions and validate player moves in real-time.

5. Problem Solving:

• Solved the challenge of alternating turns and checking for the end of the game (win or draw).
• Created a basic, random move algorithm for the computer to simulate an opponent in single-player mode.

6. Project Organization:

• Organized the project files (HTML, CSS, JavaScript) for easy readability and maintainability.
• Separated logic for the two-player and single-player modes, ensuring clear structure and functionality.

This mini project is a simple, interactive Rock Paper Scissors game that uses HTML, CSS, and JavaScript to allow users to play against the computer, with dynamic score tracking and a restart functionality.

---

About This Project

1. HTML Structure:

• Created the basic structure using HTML5 to build the game interface.
• Included external resources like images, fonts, and styles.
• Defined interactive areas where users can select their choices (rock, paper, or scissors).
• Incorporated elements for displaying the game score and computer's selection.

2. CSS Styling:

• Applied custom styles to the page using CSS variables for colors, fonts, and layout.
• Designed responsive layout using media queries to ensure the game is playable on various devices.
• Styled interactive elements (like buttons and images) with hover effects and transitions.
• Used flexbox for organizing the elements in a neat and structured manner.

3. JavaScript Functionality:

• Implemented game logic to handle user input, computer’s random selection, and determining the winner.
• Utilized event listeners to detect user’s choice and dynamically update the interface.
• Created a scoring system to keep track of the score for both the user and the computer.
• Handled game restart functionality to reset the game to its initial state.

4. Game Logic:

• Generated a random choice for the computer and compared it with the user’s choice.
• Determined the winner based on the standard rules of Rock Paper Scissors.
• Displayed messages to indicate the result of each round (win, loss, or draw).

5. Interactivity:

• Added interactive elements like clickable images for choosing rock, paper, or scissors.
• Provided a restart button to reset the game to its starting state.

---

Skills Learned from this Project

1. HTML5:

• Learned how to structure a simple interactive webpage.
• Gained knowledge of linking external resources like CSS and JavaScript files.
• Used semantic HTML tags for better accessibility and structure.

2. CSS:

• Improved my skills in styling elements using CSS, especially using flexbox for layout.
• Learned to create responsive designs with media queries to adjust layout and styling for different screen sizes.
• Gained experience in customizing the appearance of interactive elements like buttons and images with hover effects.
• Utilized CSS transitions for smooth visual feedback.

3. JavaScript:

• Learned how to write event-driven code using event listeners for interactive elements.
• Gained an understanding of generating random numbers and using them to simulate the computer’s choices.
• Implemented logic to compare user and computer choices and determine a winner.
• Worked with the DOM (Document Object Model) to update content dynamically based on user actions.

4. Game Development Basics:

• Understood the core principles of simple game development such as turn-based logic, win/loss conditions, and scoring.
• Created a fun and interactive experience for the user through the Rock Paper Scissors game.

5. Problem Solving:

• Solved logical problems in determining the winner of the game by comparing choices.
• Implemented a fair game system that randomly generates the computer’s choice and ensures correct results.

6. Project Organization:

• Structured the project into multiple files (HTML, CSS, and JavaScript) for better maintainability and readability.
• Learned how to work with multiple external files and link them together in a cohesive project.