Skip to content

mehediScriptDev/Reeni

Folders and files

NameName
Last commit message
Last commit date

Latest commit

ย 

History

62 Commits
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 

Repository files navigation

๐Ÿ’ฐ Reeni - reminder (Lending & Borrowing Tracker)

Reeni Logo

A modern, bilingual (Bengali) web application to track your lending and borrowing transactions.

React TypeScript Vite Firebase Tailwind CSS

Live Link โ€ข Backend Repo โ€ข Report Bug โ€ข Request Feature


โœจ Features

๐Ÿ” Authentication

  • Email/Password registration and login
  • Google Sign-In with one click
  • Email Verification to ensure valid email addresses
  • Secure session management with Firebase Auth

๐Ÿ“Š Dashboard

  • View all your lending (เฆ†เฆฎเฆฟ เฆงเฆพเฆฐ เฆฆเฆฟเฆฏเฆผเง‡เฆ›เฆฟ) and borrowing (เฆ†เฆฎเฆฟ เฆงเฆพเฆฐ เฆจเฆฟเฆฏเฆผเง‡เฆ›เฆฟ) transactions
  • Tab-based navigation for easy switching between lent and borrowed items
  • Pagination for handling large datasets
  • Edit & Delete transactions with confirmation dialogs
  • Mark as Returned to move items to history

๐Ÿ“ Add New Transaction

  • Quick form to add new lending or borrowing entries
  • Fields: Amount, Person, Due Date, Return Date
  • Automatic association with your user account

๐Ÿ“œ History

  • View all completed/returned transactions
  • Separate tabs for lent and borrowed history
  • Delete old history entries

๐Ÿ‘ค Profile

  • View and edit your profile information
  • Name, Email, Phone number management
  • Sign out functionality

Note: When a user edits and saves their profile (name or phone) the updated profile is persisted to the browser's localStorage under the key reeni_user_profile. This is a client-side cache that merges with Firebase user data on load โ€” changes saved here are not automatically sent to the backend unless you explicitly implement server-side profile persistence.

๐ŸŽจ UI/UX

  • Fully responsive design (mobile, tablet, desktop)
  • Bengali language interface
  • Skeleton loaders for smooth loading experience
  • SweetAlert2 for beautiful confirmation dialogs
  • Clean, modern design with Tailwind CSS

๐Ÿ› ๏ธ Tech Stack

Category Technology
Frontend React 19, TypeScript
Styling Tailwind CSS 4
Build Tool Vite 6
Authentication Firebase Auth
Database MongoDB (via Express backend)
State Management React Context API
Routing React Router 7
HTTP Client Axios
Animations Framer Motion
Icons React Icons
Alerts SweetAlert2

๐Ÿš€ Getting Started

Prerequisites

  • Node.js 18+
  • npm or yarn
  • Firebase project with Authentication enabled
  • MongoDB backend server

Installation

  1. Clone the repository

    git clone https://github.com/mehediScriptDev/Reeni.git
    cd Reeni
  2. Install dependencies

    npm install
  3. Set up environment variables

    Create a .env.local file in the root directory.

    ๐Ÿ’ฌ Need the environment variables? Message me or open an issue to request them!

  4. Start the development server

    npm run dev
  5. Open your browser

    Navigate to http://localhost:5173


๐Ÿ“ Project Structure

src/
โ”œโ”€โ”€ Components/
โ”‚   โ”œโ”€โ”€ Add-new/        # Add transaction form
โ”‚   โ”œโ”€โ”€ Auth/           # Login & Registration
โ”‚   โ”œโ”€โ”€ Dashboard/      # Main transaction list
โ”‚   โ”œโ”€โ”€ Header/         # Navigation header
โ”‚   โ”œโ”€โ”€ History/        # Completed transactions
โ”‚   โ”œโ”€โ”€ Profile/        # User profile management
โ”‚   โ””โ”€โ”€ Footer/         # App footer
โ”œโ”€โ”€ context/
โ”‚   โ””โ”€โ”€ AuthContext.tsx # Authentication state management
โ”œโ”€โ”€ config/
โ”‚   โ””โ”€โ”€ api.ts          # API configuration
โ”œโ”€โ”€ firebase/
โ”‚   โ””โ”€โ”€ firebase.init.ts # Firebase initialization
โ”œโ”€โ”€ App.tsx             # Main app component
โ”œโ”€โ”€ main.tsx            # Entry point with routing
โ””โ”€โ”€ ProtectedApp.tsx    # Auth-protected wrapper

๐Ÿ”ง Available Scripts

Command Description
npm run dev Start development server
npm run build Build for production
npm run preview Preview production build
npm run lint Run ESLint

๐ŸŒ API Endpoints

The app connects to a backend server at https://reeni-server.vercel.app

๐Ÿ”— Backend Repository: github.com/mehediScriptDev/ReeniServer

Method Endpoint Description
GET /new-list?userId= Get user's transactions
POST /new-list Create new transaction
PUT /new-list/:id Update transaction
DELETE /new-list/:id Delete transaction
GET /history?userId= Get user's history
POST /history Add to history
DELETE /history/:id Delete history item

๐Ÿ”’ Security

  • All data is user-specific (filtered by Firebase UID)
  • Email verification required for new accounts
  • Secure Firebase Authentication
  • Environment variables for sensitive configuration

๐Ÿค Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

๐Ÿ’ฌ Want to contribute or have questions? Message me or open an issue - I'd love to help!


๐Ÿ“„ License

This project is licensed under the MIT License - see the LICENSE file for details.


๐Ÿ‘จโ€๐Ÿ’ป Author

Mehedi


โญ Star this repo if you find it helpful!

Made with โค๏ธ in Bangladesh ๐Ÿ‡ง๐Ÿ‡ฉ

About

Reeni, a MERN stack application to track borrowed and lent money with automated email reminders

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

 
 
 

Contributors