pramit-marattha / fullstack-projects-frontend-with-react-and-backend-with-various-stacks

* W.I.P *🛠 Full-on full stack front end and a bit of back end web development challenge. Challenging every day to learn new stuffs about react & its in-depth features and also to explore the taste of various stacks.

Code Editor (Source code)	Chat App (Source code)	Dark Mode (Source code)	Notebook (Source code)
Conference Scheduler (Source code)	Tetris Game (Source code)	Bookmark Manager (Source code)	Movie App (Source code)
Grocery List Manager (Source code)	Pokedex (Source code)	Budget Calculator (Source code)	Newsletter (Source code)
React Music (Source code)	Space Invader Game (Source code)	Piano (Source code)	React DND Moodboard (Source code)
React Admin Dashboard (Source code)	Fan Wiki (Source code)	React Chess Game (Source code)	Tesla Mileage Evaluator (Source code)
Road Trip Map (MERN stack) (Source code)	Live Statistics (Source code)	Online Survey Creator (Source code)	Discord Clone Project (Source code)

---

It's Live 🎉 Visit here ==> https://pramit-marattha.github.io/fullstack-react-timeline/

---

---

1) Mini Code Editor

Code inside the below image is from Codepen by Zarko Rvovic (@nocni_sovac) on CodePen.

Mini Code Editor ( PR )
It's Live 🎉 Visit here ==> https://mini-code-editor.netlify.app/

---

2) Community Chat App with react and firebase

Community Chat App with react and firebase ( PR )
It's Live 🎉 Visit here ==> https://community-chat-app.netlify.app/

---

3) Dark Mode Toggle

Dark Mode Toggle ( PR )
It's Live 🎉 Visit here ==> https://dark-mode-switcher.netlify.app/

---

4) Notetaking notebook app

Notetaking notebook app ( PR )
It's Live 🎉 Visit here ==> https://notebook-app.netlify.app/

---

5) Conference Schedule App

Conference Schedule App
It's Live 🎉 Visit here ==> https://conference-schedule-app.netlify.app/

---

6) Tetris React Game

Tetris React Game
It's Live 🎉 Visit here ==> https://tetramino-tetris.netlify.app/

---

7) Bookmark App

Bookmark App
It's Live 🎉 Visit here ==>https://book-mark-react.netlify.app/

---

8) Fetch Movies

Fetch Movies
It's Live 🎉 Visit here ==>https://fetch-movies.netlify.app/

---

9) Grocery List Manager

Grocery List Manager
It's Live 🎉 Visit here ==> https://grocery-list-manager.netlify.app/

---

10) Pokemon Info (pokedex) App.

Pokemon Info (pokedex)
It's Live 🎉 Visit here ==> https://pokemon-info-app.netlify.app/

---

11) Budget Manager and Calculator.

Budget Manager and Calculator
It's Live 🎉 Visit here ==> https://budget-manager-react.netlify.app/

---

12) Newsletter app.

Awesome Newsletter App
It's Live 🎉 Visit here ==> https://newsletter-react-app.netlify.app/

---

13) Lofi Live music Player App.

Lofi Live music Player App
It's Live 🎉 Visit here ==> https://music-player-react.netlify.app/

---

14) Space Invader Game.

Space Invader Game
It's Live 🎉 Visit here ==> https://space-invader-react.netlify.app/

---

15) Virtual Piano (React Musical Instrument).

Virtual Piano
It's Live 🎉 Visit here ==> https://virtual-piano-instrument.netlify.app/

---

---

16) React moodboard (drag and drop images).

MoodBoard
It's Live 🎉 Visit here ==> https://moodboard-dnd.netlify.app/

---

17) React Admin Dashboard.

Admin-Dashboard
It's Live 🎉 Visit here ==> https://simple-admin-dashboard.netlify.app/

---

18) Wiki Search.

Wiki Search
It's Live 🎉 Visit here ==> https://react-wiki-search.netlify.app/

---

19) Simple Chess Game.

Awesome Chess
It's Live 🎉 Visit here ==> https://simple-chess-react.netlify.app/

---

20) Tesla Mileage Evaluator.

Tesla Mileage Evaluator
It's Live 🎉 Visit here ==> https://tesla-mileage.netlify.app/

---

21) Road Trip Map (MERN stack).

Road Trip Map
It's Live 🎉 Visit here ==> https://road-trip-map.netlify.app/

---

22) Live Statistics (react,redux,chartjs,react-chartsjs-2).

Covid-19 live statistics
It's Live 🎉 Visit here ==>https://covid-statistics-react.netlify.app/

---

23) Online Survey Creator (react,hooks,surveyjs,survey-react).

Online Survey Creator
It's Live 🎉 Visit here ==> https://survey-creator.netlify.app/

---

24) Discord Clone Project (MongoDb,react,hooks,Expressjs,redux).

Discord Clone Project
It's Live 🎉 Visit here ==> https://discord-clone-mern.netlify.app/

---

25) Projects Case Study / explore and Take Note(MERN stack app).

Projects Case Study / explore and Take Note
It's Live 🎉 Visit here ==> https://project-explore-mern.netlify.app/

---

26) Projects Progress Tracker(MERN stack app).

Projects Progress Tracker(MERN stack app).
It's Live 🎉 Visit here ==> https://project-tracker-mern.netlify.app/

---

27) Goal Manager Project(MERN stack app).

Goal Manager Project(MERN stack app).
It's Live 🎉 Visit here ==> https://goal-manager-mern.netlify.app/

---

28) Ecommerce react web store.

Ecommerce react web store.
It's Live 🎉 Visit here ==> https://online-pasal.netlify.app/

---

29) Musedify music player app.

Musedify music player app.
It's Live 🎉 Visit here ==> https://musedify.netlify.app/

30) Product Hunt Project.

Product Hunt Project.
It's Live 🎉 Visit here ==> https://merchandisehunt.pages.dev/

fullstack-projects-frontend-with-react-and-backend-with-various-stacks's Issues

Mood Board Web App Project

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.

Mini code editor

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)

Space Invader Game Project

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.

Bookmark Manager Project

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

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.

Playable Musical Instrument Project

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.

Want to add Rubik Cube Game

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

Tetris Game Project

Tetris Game Project

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

Security Upgrade

vulnerability and security upgrade

Email Newsletter Project

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

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.

Goal Manager Project

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.

Conference Schedule App Project

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

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

Budget Calculator and Manager Project

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.

Pokemon Project

Pokemon Project

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

Awesome Blogsite Project

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.

Metrics Dashboard Project

musedify music player like spotify

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)

Want to add Rubik Cube

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

Project Case Study Project

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".

Live Statistics Web Project.

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.

Tesla Mileage Evaluator Project

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").

Live Music Player Project

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.

Community Chat App Project

Community Chat App Project

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

Ecommerce Web Store Project

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.

Dark Mode Toggle Project

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

Twitter Clone Project

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

Live Notetaking Notebook Project

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.

Marketing Website And Company Portfolio Project

Marketing Website And Company Portfolio Project.

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

Project Progress Tracker Project

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

Website Admin Project

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

Product Hunt Project

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

Discord Clone Project

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.

Fetch Movies Imdb Api Project

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.

Road Trip Map Locator Project

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

fan wiki search

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

Online Survey Creator Project

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.