Building AI-powered products for ambitious startups.

FastAPI Shipping Service is a backend system that simulates real-world shipping operations using the Shippo API. It demonstrates how modern e-commerce platforms handle logistics workflows such as shipment creation, rate generation, label purchasing, and tracking.

Problem

Shipping logic in e-commerce systems is often complex and hidden behind third-party services. Understanding how to manage addresses, parcels, shipments, transactions, and tracking through APIs requires structured backend design and integration experience.

Solution

I built a modular FastAPI backend that integrates with Shippo and replicates the full shipping workflow:

1. Address Handling: Create and validate sender/receiver addresses.
2. Parcel Creation: Define package dimensions and weight.
3. Shipment Creation: Generate shipping rates from multiple carriers.
4. Transaction (Label Purchase): Select a rate and purchase a shipping label.
5. Tracking Integration: Retrieve shipment tracking details.
6. Webhook Handling: Receive and process real-time shipping events.

Workflow

Address → Parcel → Shipment → Rate → Transaction → Tracking

API Demo (Swagger)

The entire system is testable through an interactive Swagger UI, allowing step-by-step execution of the shipping workflow.

Architecture

• API Layer: Versioned routes with FastAPI ( / api / v1).
• Service Layer: Business logic separated from routes.
• Core Layer: Configuration, logging, and Shippo client abstraction.
• Schema Layer: Pydantic models for request/response validation.

Impact

• Demonstrates end-to-end shipping workflow simulation.
• Showcases real-world API integration with external logistics services.
• Highlights clean backend architecture and modular design.
• Provides a testable API environment using Swagger.

Complexity: External API Integration

The main challenge was designing a clean abstraction over the Shippo API while maintaining flexibility and readability:

• Problem: Direct integration can tightly couple business logic with external API responses.
• Approach: Introduced a service layer and client abstraction to isolate Shippo interactions.
• Outcome: A scalable and maintainable architecture that can easily adapt to other shipping providers.

Deliverables

• Fully functional FastAPI backend with Shippo integration.
• Documented API with Swagger UI.
• Structured project architecture for scalability.

Key Takeaways

This project demonstrates strong backend engineering fundamentals, including API design, third-party integration, and workflow modeling for real-world logistics systems.

Call to Action

If you need a scalable backend for shipping, logistics, or API integrations, feel free to connect with me on LinkedIn.

AI-Powered Startup Idea Extraction is an advanced workflow built with n8n that automatically fetches posts from targeted Reddit communities, extracts potential startup ideas using AI, and stores them in Supabase for further analysis. This project demonstrates how businesses and researchers can quickly discover trending ideas with structured data output.

Problem

The client wanted an automated way to monitor Reddit for emerging startup, e-commerce, and crypto/Web3 ideas, analyze them with AI, and store actionable insights. Manual scanning was inefficient, inconsistent, and prone to missing valuable content.

Solution

I designed an end-to-end automation workflow with the following components:

1. Reddit Data Fetching: Automatically retrieves posts from selected subreddits (Startup, E-commerce, Crypto & Web3).
2. Field Extraction: Extracts only essential fields like title and selftext from each post.
3. Data Merging & Aggregation: Combines all fetched posts into a single array for processing.
4. AI Idea Extraction: Uses Google Gemini to analyze the posts and identify concrete startup ideas with metrics for success, pros, and cons.
5. Data Parsing & Cleaning: Custom code nodes ensure AI output follows a strict JSON schema ready for database insertion.
6. Supabase Integration: Inserts each idea as a separate row in the Supabase database, enabling easy querying and reporting.

Workflow Steps

Step 1: Daily Reddit Scan

A schedule trigger initiates the workflow daily, scanning selected subreddits for hot posts relevant to startup trends.

Step 2: Extract Essential Fields

Each post's title and selftext are extracted to reduce noise and focus only on relevant content.

Step 3: Merge & Aggregate Data

Posts from all subreddits are merged and aggregated into a single array to prepare for AI processing.

Step 4: AI Startup Idea Extraction

Google Gemini analyzes each post to identify potential startup ideas, assessing success metrics, pros, and cons while outputting only structured JSON.

Step 5: LLM Output Parsing

A code node parses and cleans AI output to match Supabase's schema, ensuring each idea is ready for insertion.

Step 6: Store Ideas in Supabase

Each validated startup idea is inserted into Supabase as an individual row, making the data easy to analyze, query, and visualize.

Impact

• Eliminated manual Reddit scanning, reducing time and human error.
• Produced structured, actionable startup insights daily.
• Centralized idea storage in Supabase for further analysis or dashboard integration.
• Enabled early identification of emerging trends in startup and tech domains.

Complexity: AI & Data Structuring

The key challenge was ensuring AI outputs were always valid JSON and compatible with Supabase:

• Problem: AI sometimes returned inconsistent or incomplete data.
• Approach: Used a code node to parse, clean, and enforce a strict schema before database insertion.
• Outcome: Reliable, structured data ready for analysis or dashboards.

Learning: Enhanced expertise in n8n workflow automation, AI integration, JSON handling, and real-time API workflows.

Deliverables

• Fully functional n8n workflow (JSON).
• Documentation with setup instructions and integration details (README.md).
• Video walkthrough demonstrating workflow execution and AI idea extraction. (Coming soon)

Key Takeaways

This workflow demonstrates the ability to integrate multiple APIs, handle AI output, structure data, and automate daily research for startups, making idea discovery faster, more reliable, and actionable.

Call to Action

If you want to discover startup opportunities automatically using AI, I can build a custom workflow tailored to your niche. Book a consultation or check my LinkedIn for more projects.

Automated Lead Generation & Management is a sophisticated workflow built with n8n that captures user input, generates unique session-based leads via AI, processes the data, and automatically stores them in Airtable. This project demonstrates how businesses can streamline lead generation, improve data accuracy, and accelerate sales follow-ups.

Problem

The client wanted a scalable and reliable way to collect leads, enrich them via AI, and store them in a structured format for follow-ups. Manually generating leads from user inputs and processing them was time-consuming, inconsistent, and prone to errors.

Solution

I designed an end-to-end automation workflow with the following key components:

1. User Input Form: Captures user details and query information via a web form.
2. Session Management: Generates a unique session ID for each submission to track and organize leads effectively.
3. AI Lead Generation: Uses Google Gemini with a simple memory module to process user input and generate relevant leads automatically.
4. Data Formatting: Cleans and manipulates AI output to match Airtable's required schema.
5. Airtable Integration: Appends the structured leads directly to Airtable for easy access, reporting, and further automation.

Workflow Steps

Step 1: User Input Form

The workflow begins when a user submits their details via a web form. This serves as the trigger for the entire automation process.

Step 2: Session ID Generation

A custom code node checks if a session ID exists for the user submission. If not, it generates a unique session ID, ensuring consistent tracking of each lead.

Step 3: AI Lead Generation

The AI agent analyzes the user input and generates potential leads. Using Google Gemini and simple memory, it produces contextually relevant and structured lead information.

Step 4: Data Formatting & Cleaning

A code node processes the AI output to match Airtable's schema. This includes filtering unnecessary fields, standardizing names, and ensuring data types are compatible.

Step 5: Save Leads to Airtable

The final node appends all formatted leads to Airtable. Each JSON object from the previous node becomes a separate row, making lead tracking and analysis effortless.

Impact

• Eliminated manual lead generation, reducing human error and time spent.
• Ensured leads are consistently formatted and ready for sales follow-up.
• Accelerated the lead pipeline with AI-generated, high-quality leads.
• Centralized lead storage in Airtable, enabling easy reporting and integrations with CRM tools.

Complexity: AI & Data Formatting

The most challenging part was combining AI output with Airtable's strict schema.

• Problem: AI output was inconsistent, sometimes including unnecessary fields or missing required ones.
• Approach: Used a custom code node to parse, clean, and restructure each lead into a consistent format before sending to Airtable.
• Outcome: Now, each submission generates a complete, structured lead in Airtable, ready for immediate use.

Learning: This project improved my expertise in AI integration, n8n workflows, JSON data manipulation, and real-time API interactions.

Deliverables

• Fully functional n8n workflow (JSON).
• Video walkthrough demonstrating lead generation and Airtable integration. (Coming soon)
• Documentation with setup instructions and integration details.

Key Takeaways

This workflow highlights my ability to integrate AI, custom logic, and Airtable in a single automation pipeline. It shows how businesses can save time, reduce errors, and get actionable insights from user inputs in real-time.

Call to Action

If you want to automate lead generation and management while improving data quality and sales efficiency, I can design a tailored workflow for your business. You can book a consultation to discuss your needs, or check my LinkedIn for more information.

Automated Customer Support System is an intelligent workflow built with n8n that streamlines how customer queries are captured, acknowledged, and routed to the right team. This project demonstrates how automation reduces manual effort, improves response times, and ensures no customer request is overlooked.

Problem

The company needed a faster and more reliable way to handle customer support requests. Manually tracking form submissions, replying to users, and sharing data with the support team was slow, error-prone, and inconsistent.

Solution

I designed and implemented an end-to-end automation with four key steps:

1. Form Trigger: Collects user input (Name, Email, Phone, Product Type, Message).
2. Google Sheets Integration: Automatically stores each entry for reporting and record-keeping.
3. Automated Gmail Response: Sends instant acknowledgment emails to customers, confirming receipt.
4. Slack Notifications: Posts new support requests directly into the #customer-support channel, ensuring the team can act immediately.

Workflow Steps

Step 1: Form Trigger

Users submit their details (fullname, email, phone number, product type, and message) through the form. This data is the starting point of the automation.

Step 2: Google Sheets Integration

All form submissions are automatically stored in a Google Sheet for record-keeping and analysis.

Step 3: Gmail Acknowledgement

The user instantly receives a personalized acknowledgment email confirming their issue has been received.

Step 4: Slack Notification

A message is sent to the customer support Slack channel, giving the support team immediate access to the user's query.

Impact

• Reduced manual data entry and eliminated errors.
• Customers receive immediate responses, boosting trust and satisfaction.
• Support team receives real-time notifications, improving response times.
• Centralized record of all customer issues in Google Sheets for analysis.

Complexity: Slack Integration

This part of the workflow was the most challenging, because Slack requires more advanced setup compared to Sheets or Gmail.

• Problem: Slack rejected initial requests due to missing OAuth authentication and permissions.
• Approach: I created a custom Slack app, added the required OAuth scopes (chat:write, channels:join, users:read), and went through the OAuth flow to generate a secure token.
• Channel Access: The bot could not post to the private support channel until I manually invited it, which was a key debugging step.
• Testing & Debugging: I configured the Slack node in n8n, ran test submissions, and fixed authentication issues until messages appeared in Slack successfully.
• Outcome: Now, every time a customer submits the support form, a structured message is sent to Slack in real-time with the customer's details, allowing the team to take action instantly.

Learning: This process helped me strengthen my knowledge of OAuth 2.0 authentication, Slack's permission model, and real-world debugging of third-party API integrations.

Deliverables

• Fully functional n8n workflow (JSON).
• Video walkthrough showing the workflow in action. (Coming soon..)
• Documentation with setup instructions and integration resources.

Key Takeaways

This project showcases how I leverage automation tools like n8n to design business-ready solutions that save time, reduce costs, and improve customer experience. It also reflects my ability to troubleshoot and implement complex integrations.

Call to Action

If you're looking to automate repetitive processes in your business and improve team efficiency, I can help design and implement workflows tailored to your needs. You can book a consultation with me to discuss your requirements in detail. My LinkedIn profile is also available for more information about me.

Z-Auth is a full-stack web application focused on authentication, built using Django for the backend, Next.js for the frontend, Tailwind CSS for styling, and PostgreSQL for the database. The app provides secure user registration, login, logout, email verification, and session management using JWT tokens (access and refresh).

Project Overview

The main goal of Z-Auth was to create a secure, scalable, and user-friendly authentication system. This involved integrating Django APIs with Next.js frontend components, implementing token-based authentication, and ensuring a seamless experience for end-users.

Full-Stack Development

The project strengthened my skills in integrating backend and frontend systems:

• Django Backend: Built robust APIs for authentication, session management, and email verification.
• Next.js Frontend: Created dynamic user interfaces for login, registration, and password recovery pages.
• Frontend-Backend Synchronization: Ensured smooth communication between Django APIs and Next.js components.

Security Best Practices

Security was a top priority for Z-Auth:

• JWT Tokens: Implemented access and refresh tokens for secure API requests.
• Email Verification: Set up email services for user registration and password recovery.
• Session Management: Controlled user sessions to prevent unauthorized access.
• CORS: Configured Cross-Origin Resource Sharing for safe frontend-backend communication.

Database and Data Management

The application uses PostgreSQL to store user data securely. I designed the database schema to support flexible user profiles and scalable authentication logic.

Learning Outcomes

Working on Z-Auth provided valuable experience in:

• Building full-stack applications with Django and Next.js.
• Implementing secure authentication mechanisms using JWT and session management.
• Integrating email services for verification and password recovery.
• Configuring CORS and managing frontend-backend communication efficiently.

Conclusion

Z-Auth demonstrates my expertise in developing secure, scalable, and user-friendly authentication systems. It highlights my ability to handle both backend and frontend responsibilities, integrate APIs, and follow security best practices to deliver high-quality web applications.

Call to Action

If you want to explore more about full-stack authentication systems, consider building a similar app using Django REST Framework and Next.js. Experiment with JWT, email verification, and secure session management to strengthen your skills in modern web application security.

Resume Builder App is a dynamic web application built using Vue.js for the frontend and Vuex for state management. The app allows users to create, edit, and download professional resumes with ease, offering a seamless and interactive experience.

Project Overview

The goal of the Resume Builder App was to simplify the resume creation process and provide users with a professional tool to make impactful first impressions. The app focuses on user experience, flexibility, and clean design, enabling users to create resumes tailored to their career goals.

Frontend Development with Vue.js

The application leverages Vue.js to build a responsive and interactive interface:

• Dynamic Components: Implemented reusable Vue components for resume sections like Education, Experience, Skills, and Projects.
• Two-Way Data Binding: Ensured real-time updates as users edit their information.
• Responsive Design: Tailored the UI for desktops, tablets, and mobile devices for consistent usability.

State Management with Vuex

Vuex powers the state management of the app, making it highly responsive and organized:

• Centralized State: Managed user inputs, template selections, and resume data globally.
• Reactive Updates: Ensured that changes in one component automatically reflect across the application.
• Data Persistence: Used Vuex with local storage to allow users to resume editing without losing progress.

Key Features

• Resume Templates: Multiple pre-designed templates for professional resumes.
• Drag-and-Drop Sections: Users can rearrange sections dynamically to customize the layout.
• Real-Time Preview: Preview changes instantly while editing resumes.
• Export Options: Download resumes as PDF or print-ready formats.

Learning Outcomes

Building the Resume Builder App helped me gain valuable experience in:

• Building a fully interactive frontend using Vue.js and reusable components.
• Implementing centralized state management with Vuex for a smooth user experience.
• Designing responsive and visually appealing UIs.
• Handling real-time updates and data persistence across sessions.

Challenges and Solutions

• Challenge: Ensuring seamless real-time updates across multiple resume sections.
• Solution: Used Vuex store mutations and actions to synchronize state across components efficiently.
• Challenge: Making the app responsive on all device sizes.
• Solution: Applied mobile-first design principles and CSS flex/grid layouts.

Conclusion

The Resume Builder App demonstrates my ability to build interactive, user-centric applications with modern JavaScript frameworks. It highlights skills in frontend development, state management, responsive design, and delivering polished user experiences.

Call to Action

If you want to explore building interactive web applications, try creating a resume builder using Vue.js and Vuex. Focus on reusable components, centralized state management, and real-time updates to master modern frontend development.

Chat Application (Frontend Only) is a modern, responsive web application built using React, TypeScript, Redux Toolkit, and Tailwind CSS. The app focuses on providing a real-time messaging experience through an intuitive and interactive user interface.

Project Overview

The primary goal of this project was to design a fully functional frontend for a chat application. While backend integration is not included, the frontend is structured to support real-time messaging, user interactions, and dynamic UI updates, making it ready for future integration with APIs or WebSocket services.

Frontend Development with React & TypeScript

React and TypeScript were used to build a scalable and maintainable application:

• React Components: Built reusable components for chat messages, user lists, and chat input.
• Type Safety: Used TypeScript to enforce type safety, reduce runtime errors, and improve code quality.
• Dynamic UI: Implemented a real-time feel with component state updates and conditional rendering.

State Management with Redux Toolkit

Redux Toolkit provides a centralized state management solution, making the app responsive and consistent:

• Global State: Managed chat messages, online users, and notifications across components.
• Slices & Actions: Organized state logic using Redux slices and actions for clarity and maintainability.
• Scalable Architecture: Structured the store to easily integrate with backend APIs or WebSocket services in the future.

Styling with Tailwind CSS

Tailwind CSS was used to create a clean and modern interface:

• Responsive chat layout compatible with desktop and mobile devices.
• Consistent design system with reusable utility classes.
• Visual feedback on interactions such as hover effects and active states.

Key Features

• Chat Interface: Supports sending and receiving messages visually in real time (frontend simulation).
• User List: Displays online users and chat participants.
• Message Input: Input field with send button, emoji support placeholder, and typing indicators.
• Responsive Design: Fully adapts to desktop and mobile screens.

Learning Outcomes

Developing the Chat Application helped me gain experience in:

• Building interactive frontend applications using React and TypeScript.
• Implementing global state management with Redux Toolkit.
• Designing responsive, modern UIs with Tailwind CSS.
• Structuring a frontend codebase for future backend integration.

Challenges and Solutions

• Challenge: Managing state for multiple chat components efficiently.
• Solution: Used Redux Toolkit slices to centralize and manage chat-related state.
• Challenge: Designing a responsive interface that works on all devices.
• Solution: Applied Tailwind CSS mobile-first utilities and responsive layouts.

Conclusion

The Chat Application demonstrates my skills in building frontend-first applications with React, TypeScript, Redux Toolkit, and Tailwind CSS. It highlights my ability to create interactive, maintainable, and scalable UIs, laying a strong foundation for full-stack development in the future.

Call to Action

To enhance your skills, try connecting this frontend with a backend using WebSockets or APIs to enable real-time chat. This will provide hands-on experience in building a complete, full-stack messaging application.

Zisan's GPT is a React.js-based web application designed to simulate an interactive AI assistant. Built using JavaScript and React, the app provides answers to a predefined set of example questions, demonstrating basic AI response functionality in a user-friendly interface.

Project Overview

The goal of Zisan's GPT was to create a lightweight, frontend-focused AI chat experience. Users can select from example questions and receive automated responses, showcasing the ability to integrate JavaScript logic with React components to build interactive applications.

Frontend Development with React.js

React was used to create a dynamic and responsive interface:

• Reusable Components: Built separate components for the question list, input field, and AI response display.
• State Management: Used React state hooks to manage current questions, selected answers, and user interactions.
• Dynamic Rendering: Updated the UI in real-time as users select questions or view responses.

JavaScript Logic

JavaScript powers the core AI functionality:

• Predefined question-answer mapping to simulate AI responses.
• Functions to handle question selection and display appropriate answers.
• Interactive feedback with dynamic updates for a smooth user experience.

Styling with Tailwind CSS

The interface was styled for clarity and simplicity:

• Clean and modern layout for question and answer sections.
• Responsive design that works well on both desktop and mobile devices.
• Visual cues for selected questions and AI responses to enhance usability.

Key Features

• Predefined Questions: Users can select from a set of example questions to interact with the GPT.
• Interactive Responses: The app displays answers dynamically as users interact with it.
• Simple UI: Focused on usability and clear presentation of questions and responses.

Learning Outcomes

Working on Zisan's GPT helped me gain experience in:

• Building interactive frontend applications using React.js and JavaScript.
• Managing state effectively with React hooks.
• Creating a responsive and user-friendly interface with Tailwind CSS.
• Structuring frontend logic for interactive, question-answer applications.

Challenges and Solutions

• Challenge: Ensuring dynamic updates of answers as users select different questions.
• Solution: Utilized React state hooks and conditional rendering to display responses in real time.
• Challenge: Keeping the interface simple but interactive.
• Solution: Applied Tailwind CSS for layout and styling, ensuring clear visual hierarchy and responsive design.

Conclusion

Zisan's GPT demonstrates my ability to create interactive frontend applications using React.js and JavaScript. It highlights skills in state management, dynamic rendering, and building user-centric interfaces that can easily scale with backend AI integration in the future.

Call to Action

For hands-on experience, consider extending this project by integrating a backend API or OpenAI API to provide dynamic AI-generated responses, transforming it into a fully functional AI assistant.

KetoSlim Funnel Design & Development is a React.js-based web project focused on enhancing and redesigning an existing funnel. This updated version includes layout improvements, new components, complex conditional logic, and a responsive design optimized for all devices.

Project Overview

This project is a child funnel of a previously built quiz app, and the goal was to improve the user experience, optimize the design, and introduce more interactive functionality. The focus was on creating a visually appealing, responsive, and user-friendly interface while maintaining code reusability and efficiency.

Frontend Development with React.js

React.js was used to implement dynamic, reusable components:

• New Components: Added new components to handle complex conditional flows and new layout requirements.
• Component Reuse: Removed redundant components and reused existing ones to maintain code consistency and reduce duplication.
• Dynamic Logic: Implemented complex conditional rendering for quiz paths and funnel steps.

Responsive Design

Responsive design was a key focus for this project:

• Ensured the funnel looks perfect on desktop, tablet, and mobile devices.
• Used Tailwind CSS utilities and media queries for precise styling.
• Tested extensively across multiple screen sizes to guarantee a seamless experience.

Version Control & Collaboration

This project provided hands-on experience with Git and collaborative development practices:

• Created new development branches for feature updates.
• Managed pull requests and merged updates into the main branch effectively.
• Learned to resolve conflicts and maintain a clean, organized Git history.

Key Features

• Enhanced Layout: Updated design for improved visual hierarchy and user flow.
• Conditional Components: Components adapt dynamically based on user selections.
• Reusability: Optimized component reuse to ensure maintainable and scalable code.
• Responsiveness: Fully optimized for desktop, tablet, and mobile devices.

Learning Outcomes

Working on the KetoSlim Funnel helped me gain experience in:

• Building complex, dynamic frontends using React.js.
• Creating reusable components and managing component hierarchy efficiently.
• Implementing responsive design that works across all devices.
• Applying Git version control practices in collaborative projects.

Challenges and Solutions

• Challenge: Managing complex conditional flows within the funnel.
• Solution: Broke down logic into modular components and used conditional rendering for clarity and maintainability.
• Challenge: Ensuring perfect responsiveness on all device sizes.
• Solution: Applied Tailwind CSS responsive utilities and tested rigorously across multiple devices.

Conclusion

The KetoSlim Funnel project demonstrates my ability to build advanced React.js applications with dynamic logic, reusable components, and pixel-perfect responsive design. It highlights my skills in frontend development, Git collaboration, and delivering projects that exceed client expectations.

Client Feedback

The client expressed high satisfaction with the quality, responsiveness, and functionality of the funnel, providing positive feedback for the timely and professional delivery.

Call to Action

To enhance your skills, try creating a funnel or multi-step application using React.js with conditional logic, reusable components, and responsive design. Additionally, practice collaborative Git workflows with branches and pull requests to prepare for real-world team projects.

E-commerce Website is a frontend-focused project built using TypeScript, Next.js, Tailwind CSS, React Redux, and Redux Persist. The project aims to replicate a full-featured e-commerce experience using dummy data, focusing on frontend functionality and responsiveness across devices.

Project Overview

The goal of this project was to develop a robust frontend for an e-commerce platform, simulating essential features such as product browsing, cart management, and checkout preparation. Backend integration is not included yet, but the frontend is structured to easily integrate with APIs in the future.

Frontend Development with Next.js & TypeScript

Next.js and TypeScript were used to create a scalable, maintainable frontend:

• Type Safety: TypeScript ensures minimal runtime errors and improves code quality.
• SSR & Routing: Next.js provides server-side rendering and efficient routing for a smooth user experience.
• Reusable Components: Built modular components for product cards, cart, filters, and navigation menus.

State Management with React Redux

React Redux was used to manage application state globally:

• Centralized Store: Managed cart items, user preferences, and product filters across the application.
• Redux Persist: Ensured cart data and user selections persist across page reloads.
• Scalability: State structure designed for future backend integration and dynamic data fetching.

Styling and Responsiveness with Tailwind CSS

Tailwind CSS was used to design a clean and responsive interface:

• Mobile-first design approach to ensure seamless experience on mobile, tablet, and desktop.
• Utility classes for consistent styling and rapid UI iteration.
• Visual hierarchy for products, cart, and navigation menus to enhance usability.

Key Features

• Product Browsing: Displayed products using dynamic cards with pricing and details.
• Cart Management: Users can add/remove items, with quantities tracked in global state.
• Responsive Layout: Fully optimized for multiple screen sizes and devices.
• State Persistence: Cart data and preferences persist across page reloads using Redux Persist.

Learning Outcomes

Working on the e-commerce frontend helped me gain experience in:

• Developing scalable frontend architectures with Next.js and TypeScript.
• Implementing global state management using React Redux and Redux Persist.
• Building responsive and mobile-first user interfaces with Tailwind CSS.
• Structuring frontend logic to allow smooth integration with a future backend.

Challenges and Solutions

• Challenge: Managing global state efficiently for cart and filters.
• Solution: Used React Redux with well-structured slices and Redux Persist for state continuity.
• Challenge: Ensuring responsive design across devices without compromising functionality.
• Solution: Applied Tailwind CSS responsive utilities and tested thoroughly on multiple screen sizes.

Conclusion

This E-commerce Website project showcases my ability to build complex, frontend-first applications with React, Next.js, TypeScript, and Redux. It highlights my skills in responsive design, state management, and preparing a frontend for seamless backend integration in the future.

Call to Action

To extend this project, connect it with a backend API or database to enable real-time product data, user authentication, and full checkout functionality. This would turn the project into a complete, full-stack e-commerce application.

KetoSlim Quiz is a React.js-based multi-step quiz application designed to collect user inputs and provide personalized outcomes. Built as a medium-complexity project over one month, it incorporates dynamic form handling, mathematical calculations, and analytics integration for a professional, production-ready experience.

Project Overview

The KetoSlim Quiz allows users to complete a multi-step form that captures essential data for personalized recommendations. The project emphasizes accurate calculations, input validations, and smooth navigation between steps, offering a seamless and interactive user experience.

Frontend Development with React.js

React.js was used to build dynamic, responsive, and modular components:

• Multi-Step Form: Implemented a step-by-step quiz with smooth transitions and state management across steps.
• Reusable Components: Created modular components for inputs, buttons, and form steps to maintain clean code architecture.
• Dynamic Calculations: Performed BMI calculations and other mathematical checks directly in the frontend to provide real-time feedback.

Analytics Integration

To measure user behavior and interactions, analytics tools were integrated:

• Google Analytics: Tracked quiz usage, step completion, and user interactions.
• Google Tag Manager: Managed event tracking, goal completion, and user engagement metrics.

Validation and Input Handling

Input validation ensures the quiz is accurate and reliable:

• Restricted inputs with custom validation rules to prevent invalid data.
• Implemented real-time feedback to guide users in filling out forms correctly.
• Handled edge cases to ensure robust and error-free user experience.

Key Features

• Multi-Step Quiz: Smooth navigation between quiz steps with state persistence.
• Mathematical Calculations: BMI and other health-related computations for personalized recommendations.
• Analytics Tracking: Google Analytics and Tag Manager integration for insights and reporting.
• Responsive Design: Optimized for desktop, tablet, and mobile devices.

Learning Outcomes

Working on KetoSlim Quiz helped me gain experience in:

• Building interactive multi-step forms using React.js.
• Implementing mathematical calculations and validation logic in frontend applications.
• Integrating analytics tools to track user interactions and engagement.
• Delivering production-ready features with attention to user experience and performance.

Challenges and Solutions

• Challenge: Handling multiple form steps while maintaining state consistency.
• Solution: Used React state hooks and modular components to manage form data efficiently.
• Challenge: Validating complex input requirements and performing accurate calculations.
• Solution: Implemented dynamic validation functions and calculation algorithms to ensure correct results.

Conclusion

The KetoSlim Quiz project demonstrates my ability to create production-ready, interactive React applications with multi-step forms, calculations, and analytics integration. It highlights my skills in frontend development, user experience design, and handling real-world application requirements.

Call to Action

To expand this project, consider integrating backend support for storing user results, connecting with recommendation engines, or adding AI-driven insights to provide a fully personalized experience.