React Web App

MasterCRM

I have developed this CRM React Single Page Application (SPA) from scratch for a freelance client, featuring robust CRUD functionality and complex REST API integrations for large-scale data management and manipulation on the frontend. I have used several technologies and tools listed below.

• Utilized Redux Toolkit’s AsyncThunk to fetch and store API data, reducing redundant API calls and enabling efficient client-side data manipulation.
• Designed and implemented the UI using Material UI (MUI):
  • Created a global theme and custom reusable components based on MUI to ensure consistency and maintainability.
• Integrated React Hook Form to manage complex form validations with seamless user experience.
• Enhanced the application with advanced libraries and tools:
  • Mui DataGrid for visualizing data in table views.
  • FullCalendar for a scheduler view.
  • React DnD to build a Kanban board for task management.
  • Recharts and Chart.js for visual data representation through interactive charts.
  • Date-Fns for precise date handling and formatting.
• Containerized the app with Docker and automated container updates and staging deployments using Bitbucket CI/CD, ensuring consistent environments and easy project setup.
• Leveraged Lodash for efficient data manipulation and streamlined complex logic using its pre-built utility functions.
• Secured the application with JWT-based authentication:
  • Implemented login and sign-up functionality by storing JWT tokens in browser cookies for secure session management.
• Managed file-related tasks using libraries like File-Saver and XLSX for exporting data.
• Applied React Helmet for dynamic metadata management to improve SEO and ensure proper canonical tag implementation.
• Leveraged AI-driven tools such as ChatGPT and Copilot to expedite problem-solving, generate code snippets, and refine solutions for complex technical challenges, significantly improving development efficiency.

Live Demo  |  Source Code

(use "admin" for username and password to login)

React Web App

Carly Car Subscription

Developed and maintained their feature rich React Single Page Application (SPA) using TypeScript and Material UI, adding new functionalities to improve user experience and optimize workflows.

• Partnered with backend teams to streamline API integrations, ensuring efficient data retrieval and smooth application functionality.
• Integrated external services, including Illion credit checks and AWS Amplify Auth, to enhance the app’s capabilities.
• Set up and managed CI/CD pipelines on AWS CodePipeline, automating deployments to S3.
• Integrated external services, including Illion credit checks and AWS Amplify Auth, to enhance the app’s capabilities.
• Implemented Google Tag Manager (GTM) to monitor user interactions, linking it with Google Analytics 4 for detailed performance tracking.
• Developed dynamic CMS-powered landing pages with ButterCMS, leveraging ReactJS components for flexible content management.
• Enhanced and streamlined their subscription funnel by improving the UI, increasing conversion rates by 20%.
• Implemented unit testing with Jest and React Testing Library to validate functionality, ensure code quality, and maintain application reliability.
• Utilized Storybook to visualize and document UI components for improved development and collaboration.
• Collaborated with the product and design teams to refine UI/UX elements, aligning the application with user needs and business objectives.
• Worked effectively in a fast-paced agile team, consistently delivering features within sprint deadlines.

Live Demo

React Native Mobile App

MoviesHub

• Built a mobile app using React Native (Expo) for browsing trending and top-rated movies from TMDB API.
• Implemented stack navigation and detailed movie screens with smooth transitions.
• Focused on Android performance and compatibility across devices.
• Used Tailwind (via NativeWind) and custom components for styling.
• Applied modular architecture and hooks to enhance maintainability.

Live Demo  |  Source Code

React Web App

CRUD App Powered by AWS Amplify

Developed a React CRUD app with a dynamic UI using MUI, AG Grid, and React Hook Form,  while leveraging AWS Amplify for GraphQL API, authentication, and S3 storage.  The serverless architecture of Amplify streamlined backend management, deployment, and scaling.

• Used MUI for modern UI components and styling.
• Integrated AG Grid for advanced data tables and efficient data handling.
• Managed form state and validation with React Hook Form.
• Leveraged AWS Amplify for GraphQL API, enabling seamless CRUD operations.
• Implemented Amplify Auth for secure user authentication and authorization.
• Stored and managed assets and PDFs using Amazon S3.
• Utilized Amplify's serverless architecture for simplified backend deployment and scaling.

Live Demo  |  Source Code

React Web App

Disney+ Clone

Developed a responsive web application replicating the Disney+ user interface using ReactJS, showcasing advanced frontend development skills.

• Implemented Firebase Firestore as a scalable database for storing and managing image URLs, ensuring seamless data retrieval and storage.
• Integrated react-slick to create an intuitive and visually appealing image carousel, enhancing user experience through smooth navigation and transitions.
• Deployed the application on Firebase Hosting, ensuring reliability and accessibility.

Live Demo  |  Source Code

React Web App

Magic Match Game

Designed and developed an interactive web-based memory game using ReactJS, showcasing proficiency in frontend development and game mechanics.

• Utilized the React useState hook to implement the game's logic, ensuring seamless state management and a responsive user experience.
• Created simple yet engaging animations entirely with CSS, enhancing the visual appeal and gameplay dynamics.
• Deployed the game on Firebase Hosting for fast and reliable accessibility.

Live Demo  |  Source Code

React Web App

Money Manager

Built as a demonstration project to showcase expertise in ReactJS and Firebase,
simulating a money management tool for tracking daily expenses with secure account creation and login functionality.

• Implemented Firebase Authentication to demonstrate user registration and sign-in via email and password.
• Utilized Firebase Firestore to manage and store simulated expense data efficiently.
• Deployed on Firebase Hosting to highlight deployment and hosting capabilities.

Live Demo  |  Source Code