https://github.com/saikiran76/roundercounter
https://github.com/saikiran76/roundercounter
firebase javascript material-ui react-router-dom react-spring reactjs redux redux-toolkit tailwindcss
Last synced: 3 months ago
JSON representation
- Host: GitHub
- URL: https://github.com/saikiran76/roundercounter
- Owner: saikiran76
- Created: 2024-05-29T12:24:17.000Z (about 2 years ago)
- Default Branch: master
- Last Pushed: 2024-06-01T10:47:39.000Z (about 2 years ago)
- Last Synced: 2025-10-28T08:40:20.273Z (9 months ago)
- Topics: firebase, javascript, material-ui, react-router-dom, react-spring, reactjs, redux, redux-toolkit, tailwindcss
- Language: JavaScript
- Homepage: https://rounder-counter.vercel.app
- Size: 1.32 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Rounder-Counter React Application
## Techstack
## Overview
This is a Counter/Form application built using React which makes use of libraries like `react-spring` for smooth animations, `material-UI` for text editor.
## Planning of the applicaiton design
For more visit the official docs of react-spring, Firebase, material-ui(mui-rte):
`https://www.react-spring.dev/docs/getting-started`
`https://firebase.google.com/docs/auth/web/start?hl=en&authuser=0`
`https://firebase.google.com/docs/database/web/start?hl=en&authuser=0`
`https://www.npmjs.com/package/mui-rte`
## Report on Component Structure and Managament of states
### Component Structure
- Pages(Parent Components) : Home, Login
- Home Page with following child components(along with small chunk resusable components)
### Home Page Components
- Counter: For counter functionality and react-spring animation
- Form: For User data, also with Local storage functionality (global states & action dispatches)
- Rich Text Editor: Text Editor with options Bold, italic and more built with Material UI
- User Result component: Displays the result as JSON object
- Beizer Footer: Footer section to showcase animations with Beizer curve easing (Back and Forth animations of Background Gradient)
### Bunch of Reusable Components
- Input Field components for Log in Form and User Form
- Button Component with hover effect
- ...
### State Management Choices
- Global state management using Redux Toolkit for storing user data from the form as an object and also be used to display on Result component
- login/signup management states in the
Login component for google provided auth and global states for Email/Password auth
- count state for keeping track of Counter number along wih add, deduct and Reset Handler
### Hooks Used for State management
- useState (local state management)
- useSelector (for subscribing with components) and useDispatch(dispatching actions to store) for Global state management using RTK
## Snaps of the project
Login to use the application
## Local Setup
1) Clone the project using the command `git clone https://github.com/saikiran76/RounderCounter.git`
2) cd into the project: `cd RounderCounter`
3) Install the required dependencies using: `npm install`
4) Start and run the project on local host: `npm start`