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 days ago
JSON representation

• Host: GitHub
• URL: https://github.com/saikiran76/roundercounter
• Owner: saikiran76
• Created: 2024-05-29T12:24:17.000Z (7 months ago)
• Default Branch: master
• Last Pushed: 2024-06-01T10:47:39.000Z (7 months ago)
• Last Synced: 2024-11-08T17:15:23.334Z (about 2 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

![image](https://github.com/saikiran76/RounderCounter/assets/80874246/9228111a-8455-4097-96a9-3633550e4548)

![image](https://github.com/saikiran76/RounderCounter/assets/80874246/29128ed6-7b9a-4ccc-95ab-08097177e1ff)

Login to use the application

![image](https://github.com/saikiran76/RounderCounter/assets/80874246/d666191c-10e5-49fe-8def-b03337b546cb)

## 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`