Hello World
These are some projects that I've done as part of the Odin Project
You can click on "Try It Out" on a card to view the project, view the images (click to enlarge), or interact with some of the projects below.
This E-Commerce site is built with a modern tech stack designed for simplicity and responsiveness. The project leverages React and a custom useContext wrapper to manage global state (realtime updates to the cart from any page), ensuring efficient and scalable state management. Data is persisted through a custom local storage hook, so you won't lose your cart on a page refresh. Styling is handled with TailwindCSS, providing a sleek and responsive design. Data is fetched dynamically from the FakeStoreAPI, allowing for realistic mock data integration. The site uses Next.js for dynamic routing, enabling smooth navigation and SEO optimization. Features like interactive toasts from React Hot Toast enhance the user experience by providing real-time feedback. Overall, this stack ensures a robust and user-friendly application that's easy to extend and maintain.
Project Images (Click to Enlarge)
A dynamic CV creator app built with React Hook Form. Users can create customizable CVs by adding sections for personal details, skills, education, experience, projects, and certifications. The app integrates features like React Hook Form for efficient form handling and React To Print for seamless print functionality. TailwindCSS ensures a responsive and visually appealing design, while components and hooks streamline the app’s modular structure. The customization options include real-time changes to the header's font, size, and background color, showcasing attention to both functionality and user experience.
Project Images (Click to Enlarge)
A recipe app that lets you browse and view recipes with images, ingredient lists, and step-by-step instructions. Built using NextJS, the app leverages static generation for fast performance and Next.js Image for optimized image loading. The clean design, powered by TailwindCSS, ensures an easy and enjoyable browsing experience.
Project Images (Click to Enlarge)
A clean and responsive landing page featuring modular React components such as a header with navigation, a hero section, a motivational quote, a call-to-action button, and a footer. The use of reusable components makes it easy to modify content and update the site’s structure, while TailwindCSS ensures consistent and modern styling. Optimized image handling enhances performance and provides a smooth user experience.
Project Images (Click to Enlarge)
A simple rock-paper-scissors game. The game uses React state to track wins, losses, and previous choices, while React Hot Toast provides real-time feedback for a better user experience.
Try It OutOr
Interact Below!
You:
Computer:
Result:
A feature-packed Etch-a-Sketch app with customizable grid size and multiple drawing modes, including black-and-white, grayscale, random colors, and an eraser. The app also includes a toggleable coloring mode, allowing users to easily enable or disable coloring with a click.
Try It OutOr
Interact Below!
A sleek and responsive calculator app designed with TailwindCSS, offering essential arithmetic operations and seamless decimal handling. Users can interact with the calculator by clicking on numbers and operators, or enable keypress support to use their keyboard for input, providing a flexible and intuitive experience.
Try It OutOr
Interact Below!
A modern sign up and login forms with validation and error messages
Project Images (Click to Enlarge)
A modern and mobile friendly admin page with a navigation sidebar, navbar, customizable project cards with icons, and a site information section
Project Images (Click to Enlarge)
A cool library app that allows you to add, remove, and toggle read status of books. The project uses local storage to persist data. There is a user friendly drawer component that allows you to add a new book.
Project Images (Click to Enlarge)
A fun and interactive tic tac toe game with a two difficulties, easy and impossible. The impossible difficulty uses recursion and a minimax algorithm to ensure the computer never loses.
Try It OutOr
Interact Below!
Choose Your Settings
Select Your Marker
Select Difficulty
A simple todo list app that allows you to add, remove, and toggle completion of tasks. The app uses local storage to persist data. There is a due date feature that allows you to set a due date for each task.
Try It OutOr
Interact Below!
A simple weather app that allows you to search for the weather in a location. The app uses the Visual Crossing Weather API to fetch weather data.
Try It OutOr
Interact Below!
Enter a location to get the weather information.