https://github.com/ummamali/photons
Photons is a modern frontend-driven CRUD application designed to manage contributor data for fundraising and collection efforts. It allows users to efficiently store, update, and retrieve information about contributors through a user-friendly interface. Built with the latest frontend technologies, it ensures a seamless and interactive experience.
https://github.com/ummamali/photons
crud css3 html5 javascript localstorage reacthooks reactjs redux rest-api singlepageapplication tailwindcss
Last synced: about 2 months ago
JSON representation
Photons is a modern frontend-driven CRUD application designed to manage contributor data for fundraising and collection efforts. It allows users to efficiently store, update, and retrieve information about contributors through a user-friendly interface. Built with the latest frontend technologies, it ensures a seamless and interactive experience.
- Host: GitHub
- URL: https://github.com/ummamali/photons
- Owner: Ummamali
- Created: 2021-06-23T08:59:48.000Z (almost 5 years ago)
- Default Branch: master
- Last Pushed: 2025-02-18T17:11:05.000Z (over 1 year ago)
- Last Synced: 2025-03-02T13:19:24.840Z (over 1 year ago)
- Topics: crud, css3, html5, javascript, localstorage, reacthooks, reactjs, redux, rest-api, singlepageapplication, tailwindcss
- Language: CSS
- Homepage:
- Size: 799 KB
- Stars: 0
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Photons
Photons is a modern frontend-driven CRUD application designed to manage contributor data for fundraising and collection efforts. It allows users to efficiently store, update, and retrieve information about contributors through a user-friendly interface. Built with the latest frontend technologies, it ensures a seamless and interactive experience for managing fundraising campaigns and contributions.
## Features
Fully Reactive interface to store data about permanent contributors, as well as temporary (one-time) contributors
The application consists of following screens (interfaces)
### Dashboard (/home)
* Informs about the current day, month and total amount that has been collected
* Shows recent contributions from permanent contributors
* Shows a gist of this month donation status from contributors
### Contribute & Register Modals (/home/contribute & /home/register)
* Two interactive popup modals with validation (both inplace and from backend)
* Register a permanent contributor by his id and name
* Add contribution for current month, using that contributors id
* Data saved on backend (JSON docs)
### All Permanent Contributors (/contributors)
* Displays data about all the registered contributors
* Name, Id and total amount
* Search a contributor by his id or name
* Filter contributors as:
* All
* Who have contributed the minimum amount decided for a month
* Who have not contributed the decided amount for current month
* View a list of all contributions of a person, with the amount, time and date (/contributors/:userId)
### Temporary contributors (/collect)
* A full-featured micro-application that lets admin to store data about one time donors
* Lets you store two kinds of statuses for donors, whether:
* the person has donated an amount on the spot
* the person has given future date for collection
* Create the donor with name and specified status
* Filter the donors
* Enter the edit mode and edit the name and status of the donor
* Delete the donor
* This micro frontend app uses local storage to keep track of the changes of the state
* Can be used fully offline
* Data can be stored on backend upon going online
## Technologies Used
- **HTML**: Defines the structure and content of web pages, serving as the foundation of the web.
- **CSS**: Styles web pages to enhance visual presentation and user experience.
- **JavaScript**: Enables dynamic behavior, interactivity, and client-side logic in web applications.
- **React**: Builds reusable UI components efficiently with a declarative and component-based approach.
- **Redux**: Manages application state centrally for predictable and scalable state management.
- **React Router**: Handles navigation and routing within React applications to enable multiple views.
- **Browser API**: Provides access to browser-specific features, allowing interaction with the environment outside the web page.
## Running the Frontend
1. **Clone the Repository**
```bash
git clone https://github.com/ummamali/photons.git
cd photons
3. **Install Dependencies**
```bash
npm install
5. **Run (Development Mode)**
```bash
npm run dev
## License
This project is licensed under the **MIT License**. For more details, visit [MIT License](https://opensource.org/licenses/MIT).