My Projects

• XFlix Frontend

  Overview

  
  

  XFlix is a video streaming application which alows users to view videos,by searching through title, filtering through genres, age group, and sorting based on release date and view count. It also allows user to upload videos by getting Video title and other required details and a video link to display(Eg. Youtube video link).
  During the course of this project,

  • Setup mock api of videos list by using postman
  • Improved UI by adding responsive design elements for uniform experience across different devices.
  • Improved UX by giving several options to filter videos based on genres, age group, and sorting feature by release date and view counts.
  
  

  Skills Used:
  React Hooks, Forms, Controlled Components, REST, JSON, Error Handling, Developer Tools, ES6, Conditional Rendering, React State & Props, React, Event Handling, LIFECYCLE METHODS, React Router, Material UI, Responsive Design, Keyword Search, Debouncing, Deployment, Netlify.

  
  View Demo

• QKart Frontend

  Overview

  
  

  QKart is an E-commerce application offering a variety of products for customers to choose from. It also enhances the user experience by featuring a functionality to add items to cart and checkout the items by paying through virtual wallet.
  During the course of this project,

  • Implemented the core logic for authentication, shopping cart and checkout.
  • Improved UI by adding responsive design elements for uniform experience across different devices.
  • Utilized REST APIs to dynamically load and render data served by the backend server.
  
  

  Skills Used:
  React Hooks, Forms, Controlled Components, REST, JSON, Error Handling, Developer Tools, ES6, Conditional Rendering, React State & Props, React, Event Handling, LIFECYCLE METHODS, React Router, Material UI, Responsive Design, localStorage, Material UI Grid, Keyword Search, Debouncing, Deployment, Netlify.

  
  View Demo

• XBoard

  Overview

  
  

  XBoard is a News Feed website that will feature the latest news for select topics, from Flipboard. It also contains a feature to change the theme(Dark/Light) to support user's desired view.
  During the course of this project,

  • Built XBoard using HTML, CSS, Bootstrap and JavaScript from scratch.
  • Used Accordions and Image Carousel to improve UI and utilised localStorage to persist user preferences at client-side.
  • Fetched news content from flipboard's RSS feed using REST API.
  
  

  Skills Used:
  HTML, CSS, Figma, Bootstrap, ES6, JavaScript, DOM Manipulation, Developer Tools, REST, JSON, Netlify, Netlify CLI, Deployment, VS Code Live Server, Bootstrap Accordion, Bootstrap Carousel.

  
  View Demo

• Blood Bank

  Overview

  
  

  Blood Bank is website that will feature the details of the Donors, who are willing to donate blood, and it also allows viewers to enroll themselves as a volunteer blood donor. It also contains a feature to change the theme(Dark/Light) to support user's desired view.
  During the course of this project,

  • Built Blood Bank using HTML, Vanilla CSS and Vanilla JavaScript from scratch.
  • Used Accordions and Marquee to improve UI and utilised localStorage to persist user preferences at client-side.
  • Fetched donors details from the localStorage which was stored while enrolling user himself as donor
  
  

  Skills Used:
  HTML, CSS, ES6, JavaScript, DOM Manipulation, Developer Tools, JSON, Netlify, Netlify CLI, Deployment, VS Code Live Server, Bootstrap Accordion.

  
  View Demo

• Anime World

  Overview

  
  

  Anime World is a Website which allows Anime lovers to check the Animes and add them to their Watch List so that they can track themselves, it also give the brief introduction about the Particular Anime, which has details like Episodes, genre, duration, synopsis, background, trailer link etc which helps user to know more about the anime, user can also remove the anime’s from their watchlist once done with watching.
  During the course of this project,

  • Created web pages using HTML and CSS and made them dynamic using JavaScript.
  • Improved UX with Genre filters, image cards.
  • Utilised localStorage to persist user preferences at client-side.
  
  

  Skills Used:
  HTML, CSS, ES6, JavaScript, Developer Tools, Bootstrap, HTTP, REST, Responsive Design, VS Code Live Server, DOM Manipulation, cURL, JSON, Event Handling, localStorage, Conditional Rendering, Bootstrap Carousel, Netlify CLI, Deployment, Heroku, Netlify.

  
  View Demo

• QTrip Dynamic

  Overview

  
  

  QTrip is a travel website aimed at travellers looking for a multitude of adventures in different cities.
  During the course of this project,

  • Created web pages using HTML and CSS and made them dynamic using JavaScript.
  • Improved UX with multi-select filters, image carousels.
  • Utilised localStorage to persist user preferences at client-side.
  
  

  Skills Used:
  HTML, CSS, ES6, JavaScript, Developer Tools, Bootstrap, HTTP, REST, Responsive Design, VS Code Live Server, DOM Manipulation, cURL, JSON, Event Handling, localStorage, Conditional Rendering, Bootstrap Carousel, Netlify CLI, Deployment, Heroku, Netlify.

  
  View Demo

• QTrip Static

  Overview

  
  

  QTrip is a travel website aimed at travellers looking for a multitude of adventures in different cities.
  During the course of this project,

  • Created 3 different web pages from Wireframe layout using HTML and CSS.
  • Utilized Bootstrap extensively for responsive design.
  • Deployed the website to Netlify.
  
  

  Skills Used:
  HTML, CSS, Developer Tools, Bootstrap, CSS Flexbox, Responsive Design, VS Code Live Server, Bootstrap Responsive Images, Bootstrap Flex, Bootstrap Spacing, Bootstrap DisplayCSS Positioning, Deployment, Netlify, Netlify CLI.

  
  View Demo