Crio Portfolio

Divyam Mittal

Certified Crio Developer

Programs:

Fellowship Fullstack Developer Track 

Crio Experience

Fellowship Fullstack Developer Track

10 Apr 2021 - 16 Oct 2022

View Certificate

QTripStatic

A static travel website

QTrip is a travel website aimed at travellers looking for a multitude of adventures in different cities.

During the course of this Micro-Experience, the developer:

  • Created 3 different web pages from Wireframe layout using HTML and CSS

  • Utilized Bootstrap extensively for responsive design

  • Deployed the website to Netlify

Skills Learned:

HTML, CSS, CSS Flexbox, Responsive Design, Bootstrap, VS Code Live Server, Bootstrap Flex, Bootstrap Spacing, Bootstrap Responsive Images, Bootstrap Display, CSS Positioning, Deployment, Netlify, Netlify CLI

View Details

QTripDynamic

A dynamic travel website that can be used to browse adventures and make reservations.

QTrip is a travel website aimed at travellers looking for a multitude of adventures in different cities.

During the course of this Micro-Experience, the developer:

  • Created web pages using HTML and CSS and made them dynamic using JavaScript

  • Improved UX with multi-select filters, image carousels

  • Implemented conditional rendering of page elements

  • Utilized localStorage to persist user preferences at client-side

  • Used JQuery to facilitate the reservation form submission

  • Deployed the website using Netlify and Heroku

Skills Learned:

HTML, CSS, JavaScript, Bootstrap, REST APIs, JSON, DOM Manipulation, cURL, Bootstrap Flex, Bootstrap Spacing, ES6, localStorage, JQuery, Conditional rendering, Bootstrap Carousel, Deployment, Heroku, Netlify

View Details

Buildout - XBoard

A dynamic news feed website

XBoard is a News Feed website that will feature the latest news for select topics, from Flipboard.

During the course of this Micro-Experience, the developer:

  • Built XBoard using HTML, CSS, Bootstrap, JavaScript and JQuery from scratch

  • Utilized the figma file to understand the design requirements

  • Used Accordions and Image Carousel to improve UI

  • Fetched news content from flipboard's RSS feed using REST API

  • Deployed the website to Netlify

Skills Learned:

HTML, CSS, Bootstrap, JavaScript, JQuery

View Details

QKart Frontend

A React.js E-commerce application

QKart is an E-commerce application offering a variety of products for customers to choose from.

During the course of this Micro-Experience, the developer:

  • 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

  • Deployed website to Netlify

Skills Learned:

React.js, React Routing, Event Handling, React State & Props, REST APIs, localStorage, Lifecycle Methods, Keyword Search, Debouncing, Responsive Design, Antd Grid, Conditional Rendering, React Refs, Deployment, Netlify

View Details

QKart Backend

A scalable Node.js backend for an E-commerce application

QKart is an E-commerce application offering a variety of products for customers to choose from.

During the course of this Micro-Experience, the developer:

  • Built the complete set of REST APIs for an E-commerce application following the best practices

  • Followed a layered approach for easy maintenance

  • Used MongoDB NoSQL database for data storage

  • Implemented multiple authentication schemes

  • Wrote unit and integration tests to test the implementation

Skills Learned:

Node.js, Express.js, MongoDB, Mongoose ODM, JOI data validation, REST APIs, Token authentication, JWT Token, Password authentication, Hashing, Unit testing, Integration testing, Jest framework, MongoDB Atlas, Deployment, Heroku, Netlify

View Details

Buildout - XFlix Frontend

A video sharing platform using React.js

XFlix is a video sharing platform which hosts videos for the world to watch. It also features uploading new videos by using external video links (eg: Youtube) and playing these videos.

During the course of this Micro-Experience, the developer:

  • Built XFlix frontend using React.js from scratch

  • Utilized the figma file to understand the design requirements

  • Used Postman collection to understand API requirements

  • Mocked backend server using Postman Mock Server for API responses

Skills Learned:

React.js, Figma, Postman, REST API, Netlify

View Details

Buildout - XFlix Backend

A scalable backend for a video sharing platform using Node.js

XFlix is a video sharing platform which hosts videos for the world to watch. It also features uploading new videos by using external video links (eg: Youtube) and playing these videos.

During the course of this Micro-Experience, the developer:

  • Built XFlix backend using Node.js, Express.js and MongoDB from scratch

  • Implemented APIs according to the API contract set

Skills Learned:

Node.js, Express.js, MongoDB, REST API, Postman

View Details