Scribd
Upload
2 views

Mid - Senior Full Stack Task

Uploaded by

neerajbhattarai867
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
2 views

Mid - Senior Full Stack Task

Uploaded by

neerajbhattarai867
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 3

Task Requirements

Create a transactions record keeper

Backend Development (PHP/Laravel)


1. User Authentication:
a. Implement user registration and login.
b. Use Laravel’s built-in authentication.
c. Ensure password hashing and secure user data storage.
2. Transaction Management:
a. Create CRUD functionality for transactions:
i. Create: Allow users to add new expense/income transactions with
categories and amounts.
ii. Read: Display the list of transactions, sorted by the latest entry at the top.
iii. Update: Enable users to edit the details of existing transactions.
iv. Delete: Allow users to remove transactions.
b. Each transaction should include:
i. category (e.g., food, grocery, salary for income, etc.).
ii. Amount.
iii. type (income/expense).
iv. optional invoice image (upload functionality for invoice screenshots).
c. Implement validation for the above fields.

3. Database Structure:
a. Set up the following tables using migrations:
i. Users
ii. Categories
iii. Transactions
b. Write seeders to populate the tables with some initial user, income, and expense
data for testing.
c. Provide default login credentials for a few users in the README file.
4. Transaction Filters:
a. Implement filters for transactions:
i. Category: Filter by transaction type (e.g., income or expense).
ii. Date Range: Allow users to filter by date range (daily, monthly, yearly).
5. Charts:
a. Implement charts to visualize data. The charts should:
i. Display income vs. expense over time (e.g., pie chart, bar chart).
ii. Provide filters for selecting date ranges (day/month/year).
iii. Display data per category (e.g., food, grocery, salary, etc.).
b. Use a chart library (e.g., Chart.js or D3.js) for visualizations.
Frontend Development (HTML,CSS / React,Vue)
1. UI Design:
a. Design a responsive UI that works well on both desktop and mobile devices
using (HTML, CSS, Bootstrap, jQuery, AJAX).
b. The UI should include the following pages:
i. Dashboard: Display a summary of the user’s income/expense data (e.g.,
total income, total expenses of this month).
c. Transaction Management Page: Where users can add, edit, and delete
transactions.
d. Transaction List: Display transactions in a thumbnail view, ordered by the most
recent entry at the top. Each transaction should show:
i. Category name.
ii. Amount.
iii. A color code: green for incomes, red for expenses.
iv. The option to attach an invoice image.
e. Charts Page: Visualize transactions as charts, with the ability to filter by date
range and category.
2. Dynamic Transaction Management:
a. Use AJAX to perform CRUD operations dynamically without page reloads.
b. When adding or editing transactions, the new/updated data should appear on the
page immediately.
c. Implement form validation and show appropriate error messages when invalid
data is submitted.
3. Transaction Filters and Search:
a. Implement search and filter functionality for the transactions list.
b. Filters should allow users to select categories and date ranges (day/month/year).
c. Implement pagination or infinite scrolling to handle large datasets efficiently.

Extra Points
1. Dockerization:
a. Containerize the application using Docker for easy deployment and environment
consistency.
b. Provide clear instructions in the README on how to build and run the Docker
containers.
2. React or Vue.js (Optional):
a. If you have experience with React or Vue.js, integrate it into the frontend to build
a more dynamic and interactive user interface.
b. Use state management tools (like React Context or Vuex) to manage the data
efficiently.
3. Performance Optimization:
a. Ensure that the application performs well, especially with large transaction
datasets. Consider using pagination or infinite scrolling to reduce load times.

GitHub Repository:
1. Repository: You will create a GitHub repository for the project.
2. Access: You need to add the following emails for repository access:
a. [email protected]
b. [email protected]
c. [email protected]
3. Commit Standards: Please ensure commits are clean and well-organized with
descriptive commit messages.
4. Maintain the readme file.

Deliverables
1. Fully functional Expense Tracker application with the backend and frontend integrated.
2. Properly written migrations and seeders.
3. A responsive frontend with AJAX-powered transaction management and visualizations.
4. Clear README file with setup instructions and deployment steps (including Docker).
5. GitHub repository with clear and concise commits, following best practices.
6. Send us a mail with the repository link separately.

You might also like