Twitter Clone Project

• Page of messages
• A database.
• Store content in database
• Request Content From database
• Authentication
• Account Login
• Form Validation
• Account Form
• New Account Form

vulnerability and security upgrade

Product Hunt Project

• Installing Hyper
• Installing Firebase
• Installing Ionic
• Project Initialization
• Assets and Themes Initialization
• Authentication Pages
• Initializing useForm Hooks
• signup page and validation
• login page and validation
• Reset password page and validation
• Initializing useAuth and UserContext
• Initializing profile page
• Edit profile page and validation
• Submitting product with firebase firestore
• Firbase store and file uploads
• product listing
• product Items
• product page
• product loading and product upvotes
• search page initialization
• Web app deployment with firabse hosting
• IOS, Android, mac and windows deployment with Electron and capacitor

Ecommerce Web Store Project

• fake store API to fetch fake inventory data.
• using snipcart for real-world shopping experience.
• adding a cart functionality.
• implementing the checkout functionality using snipcart.

conference schedule app

• @fullcalendar/react library to display the calendar.
• Daygrid plugin to display the calendar in day format.
• Time grid plugin to display the calendar in 24 hr time format.
• Interaction plugin from @fullcalendar to actually interact and schedule an event.
• Able to delete scheduled events.

Cards Game Project

• Initializing and setting up the project.
• Using Ajax for axios
• comparing the value
• Adding the button
• Displaying the button
• Refactoring the hooks

Musical Instrument React

• Using Keyboard keys to play the instrument..
• Assigning specific keys for the specific notes.
• Using a soundfont loader/player (soundfont-player package) to play sounds using WebAudio API.

Project Progress Tracker Project

• Setup Server
  • Install Dependencies
  • Setup Express App
• Model DB
  • Schema setup
    • ProjectSchema
    • UserSchema
  • Setup Mongoose Model(s)
• POST /logs
  • Create a new log entry
• GET / logs
  • Listing all log entries
• Setting up react as a client
• Create react Form to add a new entry(projects as well as users)

Website Admin Project

• Create a new Page
• An admin Page
• Able to login from admin
• Authentication
• Config Settings
• Deploy and update on save

Goal Manager Project

• Setup Server
  • Install Dependencies
  • Setup Express App
• Model DB
  • Schema setup
    • goalsSchema
  • Setup Mongoose Model(s)
• POST /logs
  • Create a new log entry
• GET / logs
  • Listing all log entries
• Setting up react as a client
• Create input Form to add a new goal.

Pokemon Project

• Using Pokeapi for fetching pokemon information.
• Displays pokemon name,picture,abilities, weight and height.

Space Invader game

• Using Redux and PropTypes.
• Creating SVG Components with React.
• Using SVG, Path Elements, and Cubic Bezier Curves.
• Creating the Canvas React Component.
• Creating a shooter weapon to shoot the spaceships.
• Creating current score components.
• Creating separate spaceship components.
• Making the game responsive.
• Enabling Users to Start the Game.
• Making Flying spaceships Appear Randomly.
• Using CSS Animation to Move Flying spaceships.
• Updating Lives and the Current Score.
• Detecting Collisions.
• Shooting Cannon Balls.
• Implementing formula for position having angle and distance in two-dimensional space.

Budget Calculator and Manager Project

• A todo like budget manager and calculator.
• Can calculate the value entered by the user.
• User can easily delete their items.
• All the added items are sorted automatically according to a recent date.

Online Survey Creator Project

• Using surveyjs to fetch the survey data.
• surveyRender function to display the questions.
• progress bar to keep track of the questions.
• thank you image after the completion of the survey.

Tesla Mileage Evaluator

• Using Battery Service data from Todds repo
• Using copyright free icon assets and images.
• Using stateless (presentational) and stateful (container) components patterns to create this project.
• CarStructure component to display the car body and chassis.
• ClimateControl component to control the air condition and heater.
• CounterStat component to increment and decrement speed as well as temperature.
• Info component to display the info.
• NavHeader component to display the nav header section of the page.
• Status component to display the car models.
• Wheels component to display the wheels. (19",21").

Discord Clone Project #7

• Node and express as a server.
• Mongo DB as a database.
• React js for frontend.
• Firebase for user authentication and verification process.
• Pusher-js integration in chat and channel to experience real-time database updates without manually refreshing the entire page.
• toastr package for showing Toast message, if the user cancels the signup process.
• Material UI for styling and icons.
• On server side, nodemon package for automatically restarting the node application when a file changes.

Live Notetaking Notebook Project

• material-UI core for basic UI.
• material UI icons for basic icons.
• open source text editor react library (react-quill) for editing and taking notes.
• firebase as a backend to store the notes.

I want to add Rubik cube game using html,css, javascript.

Musedify

• React as frontend
• Redux to manage state
• emotion css for styling the page
• using hooks like (useState,useEffect,useReducer,useRef)
• add favorite
• add playlist
• choose playlist
• web audio API for playing the music
• netlify for deploying (live)

Dark Mode Toggle Project

• Material UI (ThemeProvider and createMuiTheme)
• Switch to toggle between dark and light mode.
• Button to toggle between dark and light mode.
• Custom theme color from @material-ui/core/colors

Mood Board Web App Project

• using react-dnd & react-dnd-html5-backend packages for integrating drag n'drop functionality.
• using uuid for generating unique image id name.
• using immutability-helper package for mutating a copy of data without changing its original source.
• using react-dropzone hook to create a HTML5-compliant drag'n'drop zone for images.

Project Case Study Project #23

• Github API for exploring projects.
• Search project page for studying and exploring projects.
• Separate note page for keeping and storing notes in realtime.
• Note stored inside MongoDB.
• Backend Using Node and Express.
• Project Search limit 100 per page.
• React router dom for navigating between project explore page and "Note page".

Awesome Blogsite Project

• Setup Server
  • Install Dependencies
  • cors
  • cookie-parser
  • body-parser
  • passport
  • jwt
  • validator
  • morgan
  • crypto
  • lodash
  • slugify
  • Setup Express App
  • Setup user authentication and blog post routes
• Model DB
  • UserSchema setup
  • BlogSchema setup
  • Setup Mongoose Model(s)
• POST /api
  • Create a new users
  • Create a new blogpost
• GET / logs
  • Listing all blog post
• Setting up react as a client
  • Install Dependencies
  • query-string
  • isomorphic fetch
  • jsonwebtoken
  • moment
  • reactstrap
  • nprogress
  • react-quill
  • js-cookie
• Create Form to add a new post.
• standalone separate profile page for each individual users.

Community Chat App Project

• Firebase Authentication
• Google Sign in
• Realtime Data Stream
• Implement Security Logic
• Bad Word Filtering

Marketing Website And Company Portfolio Project.

• Gather Free Picture -(copyright Free).
• feature Page.
• Home Page.
• landing Page
• Contact Page
• Signup Form
• Contact Links

Bookmark Manager Project

• Create a two separate container(right container and left container).
• left container to add bookmark name and link.
• right container to display the added link.
• Create a Scrollable right container.
• Using the State hook to update the bookmark name and link

Grocery List Calculator and Manager Project

• User input to actually add the grocery items.
• Clear button to clear the grocery items.
• local storage to save the grocery items in case of accidental page refresh.

Description

An awesome portable and mini code editor for editing HTML, CSS, and javascript from anywhere via a simple URL link.

• Hyper Text Markup Languge (HTML5 / XML) editor
• Cascading style sheet (CSS)
• Javascript Editor
• localStorage(for keeping code as it is, incase of accidental page refresh)

Live Music Player Project

• Play and pause button to control the music.
• Skip and forward button.
• Next song thumbnail image.
• Displaying next song title name, artist name as well as the album name.

Live Statistics Web Project.

• disease.sh and covid.mathdro api to fetch the covid-19 recent data.
• using chart js and react-chart-js (wrapper of chartjs) to visualize data into line chart and pie chart from fetched API.
• using redux for managing state.
• using styled-component for styling.
• copyright free images.
• Routes for navigating to different pages.

Tetris Game Project

• Stage background and Tetraminos
• Styled Components
• Custom Hooks
• Styled Components
• Stage Update Player Movement
• Collison detection
• Player Movement
• Game Status
• ReactMemo

Road Trip Map Locator using MERN Stack

• Setup Server
  • Install Dependencies
  • Install / Setup Linter
  • Setup Express App
  • Setup Not Found and Error Middlewares
• Model DB
  • Schema setup
    • Title - Text
    • Description - Text
    • Comments - Text
    • Ratings Scale from 1 to 10
    • Image - Text / URL
    • Start Date - DateTime
    • End Date - DateTime
    • Latitude - Number
    • Longitude - Number
    • Created At - DateTime
    • Updated At - DateTime
  • Setup Mongoose Model(s)
• POST /logs
  • Create a new log entry
• GET / logs
  • Listing all log entries
• Setting up react as a client
• Create Form to add a new entry
• Setup Map SDK on client
• List all log entries on map

fan wiki search

• Wikipedia api for fetching search results.
• simple popup search ui to display the results.

I want to add Rubik cube game using html, CSS, JavaScript.

Fetch Movies Imdb Api Project

• imdb api to fetch the movies list .
• Users able to search the movies.
• Movies are listed according to searched keywords.
• Movies titles, release date and images to be displayed accordingly.

Email Newsletter Project

• Using MailChimp and its API to store the registered email address.
• Users are able to register and subscribe to the newsletter directly and simply by entering their respective email address.

Simple Chess Game

• using react-chess package to integrate chess board and chess pieces.
• react-timer npm package to integrate timer inside the app.
• Two separate timer for two separate players.
• simple navigation bar.
• reset button to reset the chess pieces to initial state.