Aleksandra Cheidze

Aleksandra Cheidze

Fullstack Developer

Creating beautiful and functional web experiences

About Me

I'm a Fullstack Developer based in Berlin with a passion for building efficient and scalable systems. My journey into tech started with a fascination for how things work behind the scenes, and this curiosity continues to drive me today. I love crafting solutions that are not only functional but also intuitive and long-lasting. Whether it’s backend architecture, optimizing performance, or bringing ideas to life through React, I focus on delivering quality at every step. Always up for new challenges and constantly learning, I aim to create technology that makes a real impact.

My Skills

Frontend

HTML/CSS
JavaScript
TypeScript
React
Next.js
Redux
Vue.js

Backend

Java
Spring Boot
Node.JS
Python
Fast API
Express.js

Technologies

Docker
Kubernetes
Jenkins
CI/CD
RESTful API
Redis

Databases

Supabase
MySQL
PostgreSQL
MongoDB

My Projects

Arte Applicata Portfolio Screenshot

Arte Applicata

A modern, multilingual portfolio website for an interior designer. Clean, user-friendly, and fully responsive, supporting four languages and optimized for SEO and performance.

Next.js (App Router) React TypeScript Tailwind CSS Supabase next-intl PWA Vercel
GastroLecker Screenshot

Gastrolecker

Fullstack Web Platform for Online Food Sales and Delivery. Modern, scalable, and user-friendly solution for food vendors to sell online, manage orders, and engage customers with loyalty and referral programs.

Next.js (React) Tailwind CSS ESLint PostCSS Python 3.12 FastAPI Supabase Docker Stripe PayPal SMTP Telegram Bot API
BeautyBook Demo

BeautyBook

An online booking platform connecting clients with beauty professionals (hairdressers, nail artists, masseurs, cosmetologists, makeup artists) to simplify appointment scheduling and service management.

Java Spring Boot PostgreSQL JWT Cloudinary Redis Railway

Crypto trading Platform

Backend for secure crypto trading: manage assets, process orders, integrate payments, and access real-time market data.

Java Spring Boot MySQL JWT Spring Security PayPal/Stripe
Cassandra Movies Demo

Cassandra Movies

Modern app for movie discovery, search, trailers, reviews, and smart recommendations in a clean interface.

React React Router Tailwind CSS Appwrite TMDb API
Video Text Extractor Demo

Video Text Extractor (VTR)

Extract and copy text from any video, image, or web page area in your browser. Fast OCR, no registration, works with live and static content.

JavaScript (ES6+) Chrome Extension Manifest V3 HTML CSS Node.js Express.js Google Cloud Vision API

Learning Management System

Comprehensive backend for managing courses, students, and educational content. Built for scalability, security, and extensibility in modern e-learning environments.

Java Spring Boot MySQL JWT org.kohsuke.github (GitHub API)
React Sneakers Shop Screenshot

React Sneakers Shop

A modern online store for sneakers. Fast, interactive, and fully responsive, built with ReactJS and deployed on Vercel.

ReactJS React Router React Context Axios SCSS React Skeleton
Expense Manager Screenshot

Expenses Category Manager

Modern app for tracking, categorizing, and analyzing personal expenses. Responsive UI, clear reports, and privacy-focused architecture.

Java HTML5 CSS3 JavaScript Chart.js Docker

Get In Touch

contact@aleksandracheidze.com

Berlin, Germany

×
Video Text Extractor Demo

Video Text Extractor (VTR)

Extract and copy text from any area on a video or web page directly in your browser. Perfect for students, researchers, and content creators who need to grab text from video lectures, webinars, or screenshots.

Project Goal

Provide a simple way to extract and copy text from video frames, images, or other non-selectable content in the browser.

My Role

  • Designed and implemented the Chrome extension front-end and popup UI
  • Created and structured the backend API using serverless functions
  • Integrated Google Cloud Vision API for OCR
  • Set up deployment scripts and configs for multiple platforms
  • Wrote technical documentation and user instructions

Key Features

  • Select any area on a video or web page to extract text
  • Works with live video, images, and static DOM content
  • Fast OCR using Google Cloud Vision
  • No sign-up or registration required
  • Modern, intuitive Chrome extension UI
  • Free usage tier, upgrade prompts for heavy users
  • Ready for self-hosting and deployment on Netlify, Render, Google Cloud, or Heroku
  • Robust error handling for API, quota, and billing issues

Tech Stack

  • Frontend/Extension: JavaScript (ES6+), Chrome Extension Manifest V3, HTML, CSS, html2canvas
  • Backend/API: Node.js, Express.js, Google Cloud Vision API, Netlify Functions (serverless)
  • Other: Docker, Bash scripts, configs for Netlify, Render, Google Cloud, Heroku

Architecture

  • Client Side: Chrome extension injects scripts for area selection, capture, and sending to backend for OCR
  • Backend/API: REST endpoints as serverless functions (OCR, CORS proxy)
  • Communication: fetch for HTTP requests, Chrome messaging for internal communication
  • Stateless, scalable: Serverless backend, easy to scale or redeploy

Integrations & APIs

  • Google Cloud Vision API for OCR
  • Netlify Functions for backend endpoints
  • Supports Docker, Google Cloud Run, Netlify, Render, Heroku

Optimizations

  • Only uploads cropped area for OCR to reduce bandwidth
  • Retry and timeout logic for all API calls
  • Limits image size to 10 MB
  • Accessible fonts and clear error messages

Technical Challenges & Solutions

  • Area selection and capture: html2canvas for DOM/video, custom overlays
  • Large images and API quotas: strict size limits, user-friendly error notifications
  • User experience: clear instructions, intuitive UI, detailed error feedback

Result / Outcome

  • Fully functional, all major features implemented and tested
  • Chrome extension can be installed locally or self-hosted
  • Backend ready for deployment on various platforms
  • Production-ready codebase with documentation
×
Arte Applicata Portfolio Screenshot

Arte Applicata

Arte Applicata — a modern, multilingual portfolio website for an interior designer. Clean, user-friendly, and fully responsive, supporting four languages and optimized for SEO and performance.

Project Goal

To create a clean and user-friendly portfolio site where potential clients and partners can quickly view the designer’s work, offered services, and contact details. The website supports four languages to reach a wide international audience and works seamlessly on both desktop and mobile devices.

My Role

I handled the entire development process: from planning the site’s structure, building the frontend, integrating external services, optimizing speed and SEO, setting up multilingual support, to ensuring clean and maintainable code.

Key Features

  • Supports 4 languages (English, German, Russian, Ukrainian) with automatic language detection and switching
  • Fast server-side rendering (SSR) for quick loading and better SEO
  • Responsive design built with Tailwind CSS, optimized for all screen sizes
  • Gallery and detailed project pages to showcase design works
  • Smooth page transitions and custom animations for better user experience
  • Cookie consent banner, legal notice, privacy policy, and social media icons on every page
  • Integration with Supabase for storing and displaying images efficiently
  • SEO best practices including meta tags, sitemap, and robots.txt
  • Progressive Web App (PWA) support for offline use and improved performance
  • Custom cursor and easy theme switching

Tech Stack

  • Frontend: Next.js (App Router), React, TypeScript, Tailwind CSS
  • Backend & Storage: Supabase for images and backend services
  • Localization: next-intl for managing translations
  • Other: Vercel Analytics, PWA support, ESLint, PostCSS

Architecture

  • Server-Side Rendering (SSR) for SEO and fast initial page loads
  • Client-Side Rendering (CSR) for interactive UI components without full page reloads
  • Middleware handles language detection and routing
  • Modular components designed with DRY and KISS principles
  • Translations and content stored in separate files for easy updates

Integrations & APIs

  • Supabase: image storage and delivery with proxy bypass for speed
  • Vercel Analytics: traffic monitoring
  • Service worker enabling PWA offline functionality
  • Social media links: Facebook, Instagram, LinkedIn

Optimizations

  • LCP and Blur-up images for faster loading
  • Lazy loading and code splitting of JS and CSS
  • Minified CSS and JavaScript files
  • SEO-friendly meta tags, sitemap, robots.txt
  • Accessibility support with ARIA attributes and custom focus styles
  • Font caching and optimization

Challenges & Solutions

  • Built a multilingual site with automatic locale detection and dynamic routes
  • Optimized image loading from Supabase without slowing down the site
  • Balanced smooth animations with high performance
  • Enabled full PWA offline support without losing features
  • Reduced code duplication through reusable components

Outcome

The project is fully complete and deployed on Vercel. The site runs smoothly on all devices and supports all four languages. Its architecture allows easy scaling and adding new features or languages in the future.

×
GastroLecker Screenshot

GastroLecker

Fullstack Web Platform for Online Food Sales and Delivery. Modern, scalable, and user-friendly solution for food vendors to sell online, manage orders, and engage customers with loyalty and referral programs.

Project Goal

Gastrolecker is designed to help food vendors sell their products online through a modern, scalable, and user-friendly platform. It simplifies order processing, customer management, and supports multiple languages to reach a wider audience.

My Role

I worked alongside another fullstack developer, responsible for full-cycle development including frontend, backend, payment integration, loyalty and referral systems, GDPR compliance, testing, and deployment.

Key Features

  • Secure user authentication with registration bonuses
  • Product catalog, shopping cart, and payment via Stripe & PayPal
  • Real-time order status updates and order history
  • Loyalty program offering cumulative discounts for returning customers
  • Referral program
  • Coupons and discount code system
  • Notifications via email and Telegram for orders and promotions
  • Admin panel to manage users, products, orders, coupons, and promos
  • Multilingual UI (English and German)
  • Responsive, mobile-first design
  • GDPR compliance with cookie consent and privacy policy
  • SEO optimization including sitemap, robots.txt, and canonical tags
  • Newsletter subscription, contact, and FAQ pages

Tech Stack

  • Frontend: Next.js (React), Tailwind CSS, ESLint, PostCSS, Internationalization
  • Backend: Python 3.12, FastAPI (REST API), Supabase (PostgreSQL, Auth), Docker
  • Integrations: Stripe & PayPal SDKs, SMTP, Telegram Bot API

Architecture

  • Next.js frontend with SSR and CSR for SEO and interactivity
  • FastAPI backend providing scalable REST API
  • Dockerized environment for easy deployment and scalability
  • Supabase used for authentication and database storage
  • Middleware for locale detection and routing
  • Modular, reusable components following DRY and KISS principles

Integrations & APIs

  • Stripe and PayPal for secure payments
  • SMTP for email notifications
  • Telegram Bot API for real-time order alerts

Optimizations

  • SEO-friendly meta tags, sitemap.xml, robots.txt
  • Mobile-first responsive design
  • GDPR compliance without compromising UX
  • Code quality with ESLint and PostCSS
  • Performance: lazy loading, minimized CSS/JS

Challenges & Solutions

  • Secure and smooth authentication
  • Integration of multiple payment gateways
  • Real-time order tracking
  • Multilingual support with dynamic language switching
  • Implementation of loyalty and referral programs
  • Full GDPR compliance

Deployment

  • Frontend deployed on Vercel for fast global CDN and serverless functions
  • Backend deployed on Render for reliable API hosting and scalability

Outcome

The platform is live and fully operational, helping food vendors efficiently sell online. The scalable architecture allows easy expansion and addition of new features.

×
BeautyBook Demo

BeautyBook

An online booking platform connecting clients with beauty professionals (hairdressers, nail artists, masseurs, cosmetologists, makeup artists) to simplify appointment scheduling and service management.

My Role

Backend development: designed and implemented the REST API, database schema, authentication, business logic, caching, email notifications, and API documentation.

Key Features

  • Booking management: create, update, cancel bookings; search bookings by user and status.
  • User management: registration, role-based access control (clients, professionals, admin).
  • Procedure and category management: create, update, delete services and categories (admin only).
  • Schedule management: professionals set availability and manage bookings.
  • Portfolio support: image upload and storage for professional profiles.
  • Secure JWT-based authentication and authorization.
  • API documentation with Swagger UI.
  • Planned features: notification system (push/in-app), payment gateway integration, SMS reminders, analytics dashboards, AI chatbot.

Tech Stack

  • Backend: Java, Spring Boot
  • Database: PostgreSQL
  • Authentication: JWT
  • File storage: Cloudinary
  • Email service: Java Mail Sender
  • Caching: Redis
  • Testing: JUnit 5, Spring Security Test
  • Deployment: Railway

Architecture

  • Monolithic REST API with layered architecture: controllers, services, repositories.
  • JWT tokens for stateless authentication.
  • Redis caching for performance improvement.
  • Modular design for extensibility.

Integrations and APIs

  • Cloudinary: store and serve portfolio images.
  • SMTP Mail Service: sending email notifications.
  • Redis: cache frequently requested data to reduce DB load.
  • Planned: payment gateways (Stripe/PayPal), SMS providers, push notification services.

Optimizations

  • Redis caching with TTL tuned per data type (categories, procedures, bookings).
  • API documentation for frontend and testers via Swagger.
  • Transaction management for booking conflict resolution.
  • Secure token handling for user sessions.
  • Environment variable config for flexibility between dev and prod.

Technical Challenges and Solutions

  • Booking concurrency handled via DB transactions to prevent double-booking.
  • Managing large image uploads without blocking backend using Cloudinary.
  • Redis cache invalidation strategies for timely updates.
  • Secure JWT token refresh flows to avoid session hijacking.
  • Designing role-based access control to separate client, professional, and admin privileges.

Result / Status

MVP backend fully developed and deployed in production.

×
Cassandra Trading Demo

Crypto trading Platform

Secure and efficient backend for a cryptocurrency trading platform.

Project Goal

The main goal of this project is to create a secure and efficient backend for a cryptocurrency trading platform. It solves the problem of managing digital assets, processing orders, integrating payment solutions, and providing real-time market data for users who want to trade or monitor cryptocurrencies. The target audience includes both individual investors and traders looking for a robust, scalable backend for a crypto trading solution.

My Role

I was responsible for the end-to-end backend development of this project. My tasks included designing the architecture, implementing business logic, integrating third-party APIs, ensuring robust authentication and security, and documenting the API. I also set up the database schema, wrote the core service and controller logic, and configured deployment environments.

Key Features

  • Advanced Wallet Functionality: Secure wallet-to-wallet transfers, direct withdrawals to bank accounts, and easy wallet recharges.
  • Comprehensive Transaction History: Detailed withdrawal logs and a full history of wallet transactions (deposits, transfers, withdrawals). Users can search for any supported coin and view all related activity.
  • Authentication & Security: Secure login and registration, two-factor authentication (2FA), and a streamlined password recovery process.
  • Real-Time Data Integration: Fetches live cryptocurrency data from trusted APIs (CoinGecko, Gemini), enabling users to monitor trends and make informed decisions.
  • Payment Gateways: Integration with major providers like PayPal and Stripe for seamless fiat transactions.
  • Portfolio Analytics: Basic analytics to help users monitor their investments and track performance.
  • API-first Approach: Well-documented REST endpoints for all core operations (auth, assets, orders, coins).

Tech Stack

  • Backend: Java 17+, Spring Boot, Spring Security, Spring Data JPA
  • Database: MySQL
  • Authentication: JWT, Spring Security, 2FA
  • API Documentation: OpenAPI/Swagger, Postman
  • Email: Java Mail Sender
  • HTTP Client: Spring RestTemplate
  • Deployment: Railway, Render cloud platforms

Architecture

  • API-First: RESTful backend with clear separation of concerns (controllers, services, repositories).
  • Monolithic (with modular structure): All core logic is contained within a single Spring Boot application, but the design allows for future microservices extraction.
  • Stateless Auth: Uses JWT for stateless authentication.
  • External Data Integration: All market and coin data are fetched in real time from third-party APIs (CoinGecko, Gemini).

Integrations & APIs

  • CoinGecko: For real-time and historical cryptocurrency data (prices, charts, trending coins, search).
  • Gemini: Additional real-time price feeds.
  • PayPal & Stripe: Fiat payment gateway integration for deposits and withdrawals.
  • Email: For account notifications and password recovery.

Optimizations

  • Performance: Asynchronous REST calls for data-heavy endpoints, pagination for large datasets (e.g., coin lists).
  • Security: JWT tokens, 2FA, secure password hashing, and validation of all user inputs.
  • Scalability: Modular codebase and use of Spring Boot best practices for easy scaling and maintainability.
  • API Documentation: Automated OpenAPI docs for easier client integration.

Technical Challenges & Solutions

  • Real-Time Data Reliability: Handling failures from external APIs (CoinGecko, Gemini) with graceful error handling and fallback strategies.
  • Secure Transactions: Implemented robust authentication, 2FA, and careful validation for all wallet and order operations.
  • Extensibility: Designed the system so new coins, payment methods, or analytics modules can be added with minimal refactoring.
  • Deployment: Configured multiple environments (local, Railway, Render) with environment-specific settings for seamless CI/CD.

Results / Status

The backend is complete and production-ready, with all core features implemented and thoroughly documented. The project is deployed in various environments, and is ready for frontend integration and further feature expansion (e.g., AI chatbot, advanced analytics, more payment methods).

×
Cassandra Movies Demo

Cassandra Movies

Modern web application for movie discovery, search, and recommendations.

Project Goal

The goal of this project was to create a modern web application where users can search for movies, view detailed information, watch trailers, read reviews, and receive recommendations. The application is designed for movie enthusiasts who want a convenient way to explore trending, popular, and recommended films with a seamless and visually appealing experience.

My Role

I was responsible for every stage of the project: designing the UI/UX, developing the frontend, setting up backend services, integrating third-party APIs, and architecting the overall application. I also handled performance optimizations and ensured the codebase was modular and reusable.

Key Features

  • Movie Search: Users can search for movies by title.
  • Movie Details: Each movie page includes description, rating, release date, genres, and cast.
  • Trending & Popular Movies: Dynamic algorithm displays trending and popular films on the homepage.
  • Trailers: Users can watch movie trailers directly in the app.
  • Reviews: Users can read movie reviews.
  • Recommendations: The app suggests movies based on the films a user has viewed.
  • Responsive UI: Fully responsive, works seamlessly on all devices.
  • Modern Design: Clean, attractive, and user-friendly interface.

Tech Stack

  • Frontend: React, React Router, Tailwind CSS
  • Backend: Appwrite (for authentication and database)
  • APIs: TMDb (The Movie Database) API for movie metadata, trailers, and reviews
  • Other: Vite (build tool), custom CSS modules for component styling

Architecture

  • The app is built as a single-page application (SPA) with client-side rendering (CSR) using React.
  • Routing is managed by React Router.
  • Appwrite is used as a backend-as-a-service for authentication and storing user-related data (such as search analytics).
  • Data from the TMDb API is fetched on the client side.

Integrations and APIs

  • TMDb API: Used to fetch movie details, posters, trailers, reviews, and recommendations.
  • Appwrite: Handles user authentication, search analytics, and any custom backend data needs.

Optimizations

  • Performance: Images are optimized, and only necessary data is fetched from APIs. Code splitting and lazy loading are applied for route-based components.
  • SEO: Although SPA limits SEO, semantic HTML and proper metadata are used to improve discoverability.
  • Accessibility: The UI uses accessible color contrasts and semantic elements. The design is responsive and touch-friendly.

Technical Challenges and Solutions

  • API Rate Limiting: Implemented efficient caching and debouncing on search input to minimize unnecessary API requests.
  • Dynamic Recommendations: Built a recommendation system based on user viewing history, leveraging both local state and backend analytics.
  • State Management: Utilized React hooks and context to manage state across components without unnecessary re-renders.
  • Responsive Layouts: Used Tailwind CSS utility classes and custom breakpoints to ensure pixel-perfect layouts on all screen sizes.

Result / Outcome

The project is completed and live. It functions as a full MVP, offering a smooth and feature-rich movie discovery experience. The codebase is modular and ready for further enhancements or scaling.

×

Learning Management System (LMS) – Backend Module

Robust backend foundation for educational organizations, instructors, and administrators. Streamlines cohort management, automates repository creation, and ensures data consistency and security. Designed for scalable, structured educational processes and integration with modern tooling like GitHub.

Project Goal

The goal of this backend module is to provide a robust foundation for a Learning Management System used by educational organizations, instructors, and administrators. The project helps streamline the management of learning cohorts, automate the creation of educational repositories, and ensure data consistency and security. It is designed for teams or institutions looking to scale and structure their educational processes, minimize manual work, and integrate with modern tooling such as GitHub.

My Role

  • Designed and implemented REST APIs using Spring Boot
  • Developed endpoints for creating and editing cohorts
  • Validated and ensured uniqueness for cohort data
  • Implemented structured and meaningful error handling
  • Automated repository creation and management via the GitHub API (org.kohsuke.github)
  • Managed and optimized data storage with MySQL
  • Handled source control, branching, and code reviews on GitHub
  • Organized the development process using Kanban methodology in Jira

Key Features

  • Cohort management: create, edit, and validate cohort entities
  • REST API endpoints for all core backend operations
  • Automated creation of GitHub repositories for new cohorts
  • Structured validation and error messaging for clients
  • Integration with external services (GitHub, utilities for Zoom integration)
  • Modular DTOs for lesson metadata and lesson code management
  • Local development and deployment scripts

Tech Stack

  • Backend: Java, Spring Boot
  • Database: MySQL
  • API Integration: org.kohsuke.github (GitHub API)
  • Version Control: GitHub (PRs, branching, code reviews)
  • Project Management: Jira (Kanban board)

Architecture

  • RESTful API approach for all endpoints
  • Service-oriented architecture within the backend
  • DTOs for clear data transfer and validation
  • Environment-based configuration through application.properties
  • Monolithic backend (as part of a larger modular system)

Integrations and API

  • GitHub API: Automates the creation and management of repositories for each cohort, reducing manual setup and maintaining consistency across cohorts.
  • Zoom (utility classes): Provides helpers for generating and formatting meeting titles and metadata. Direct Zoom API communication is prepared but not the core focus.

Optimizations

  • Enforced cohort data uniqueness at API level to prevent duplicates
  • Custom error handling for detailed client feedback and easier debugging
  • Optimized database queries for key operations (cohort/lesson storage and retrieval)
  • Clear code structure and logging for maintainability

Technical Challenges and Solutions

  • Challenge: Guaranteeing the uniqueness of cohort fields during concurrent operations
    Solution: Added validation logic and transactional integrity to REST endpoints.
  • Challenge: Secure and consistent repository creation via external API
    Solution: Leveraged org.kohsuke.github library with environment-secured tokens and handled edge cases in integration.
  • Challenge: Maintaining clear and actionable error handling
    Solution: Implemented custom exception classes and structured logging throughout the codebase.

Result / Outcome

The backend module is fully implemented and ready for integration with the broader LMS platform. It is production-ready for local deployment and can be extended to support additional integrations and features as needed.

×
React Sneakers Shop Screenshot

React Sneakers Shop

Modern online store for sneakers. Browse, search, and purchase sneakers, manage favorites, and view order history. Fast, interactive, and fully responsive, built with ReactJS and deployed on Vercel.

Project Purpose

The goal of this project was to create an online store for sneakers, providing users with a seamless shopping experience, including catalog browsing, cart management, favorites, and order history.

My Role

Full development: UI design, architecture, feature implementation, routing, state management, and responsive styling.

Key Features

  • Sneaker catalog: browse and filter sneakers
  • Add to cart: select sneakers and add to shopping cart
  • Add to favorites: mark sneakers for quick access
  • Order history: review previous purchases
  • Real-time search: search sneakers by name
  • Responsive UI: works on desktop and mobile

Tech Stack

  • Frontend: ReactJS, React Router, React Context, Axios, SCSS, macro-css, React Skeleton
  • Backend: No backend; all data is local (db.json or in-memory arrays for demo)
  • Other: Vercel for deployment

Architecture

  • SPA with client-side rendering (CSR) using ReactJS
  • Routing managed by React Router
  • State management via React Context and local state
  • RESTful patterns with Axios (local data for demo)

Integrations & API

  • No external APIs; data managed locally (db.json)
  • Axios set up for future API integration
  • Deployed on Vercel

Optimizations

  • Responsive design via SCSS and media queries
  • Skeleton loaders for smooth loading
  • Minimal bundle size, fast routing, optimized images
  • Meta tags for viewport and theme color

Technical Challenges & Solutions

  • State management: scalable context for cart, favorites, orders
  • Responsive UI: adaptive SCSS and flexible layouts
  • Animations: subtle icon and title animations
  • Mock backend: local data and in-memory arrays for demo
×
Expense Manager Screenshot

Expenses Category Manager

Comprehensive budget management application for tracking, categorizing, and analyzing expenses.

Project Goal

This project was created to solve a common problem: helping individuals efficiently manage their personal finances by tracking expenses across categories and generating insightful reports. The application is designed for users who want a clear overview of their spending habits, allowing them to add, categorize, and analyze expenses, compare monthly and yearly trends, and ultimately make better financial decisions.

My Role

I worked as part of a two-person development team, jointly responsible for the full cycle of project implementation. My responsibilities included backend development (Java), frontend development (vanilla JavaScript, HTML, CSS), designing the application architecture, implementing core features (expense CRUD, category management, report generation), and setting up deployment (Docker, Render). I also contributed to UI/UX design, ensuring a responsive and modern interface, and handled API integration between frontend and backend.

Key Features

  • Add, edit, and delete expense records
  • Categorize expenses for detailed analysis
  • Create, rename, and remove custom categories
  • Generate reports by category, month, or year
  • Visualize spending trends using charts (Chart.js)
  • Responsive design with dark mode support
  • Compare expenses between months/years to analyze changes
  • Local and server-based report generation (fallback for offline/failed requests)

Tech Stack

  • Frontend: HTML5, CSS3, vanilla JavaScript, Chart.js for data visualization
  • Backend: Java 17, custom lightweight HTTP server
  • Database: File-based storage (expenses.txt, categories.txt)
  • Deployment: Docker, Render
  • Other: RESTful API for frontend/backend communication

Architecture

  • Backend: Custom REST API implemented in Java, with classes like SimpleExpenseServer, BudgetApp, ExpenseCategoryManager, and ExpenseReportGenerator. Handles all business logic and data storage.
  • Frontend: Organized as single-page application logic, using client-side rendering (CSR). All interactions are asynchronous via API calls.
  • Deployment: Dockerized backend and frontend served via Render.

Integrations and API

  • Chart.js: Used in the frontend for dynamic data visualization of expense reports.
  • REST API: All expense and category operations, as well as report generation, are handled via RESTful endpoints served by the backend.
  • No third-party financial integrations are present; all data is managed in-app for privacy.

Optimizations

  • Responsive design for desktop and mobile using CSS media queries
  • Dark mode toggle for better accessibility and user comfort
  • Efficient client-server communication and local fallback for report generation in case of backend unavailability
  • Minimal dependencies for faster load times; vanilla JS for most logic

Technical Challenges and Solutions

  • Custom HTTP server: Instead of using a framework, I implemented a custom HTTP server in Java for full control and learning purposes.
  • File-based storage: Managed concurrent access and data integrity manually, since no SQL/NoSQL DB was used.
  • Report generation: Built both server-side and local fallback logic so reports remain available even if the backend fails.
  • Deployment: Containerized the application for consistent deployment and easy scaling.

Result / Outcome

The project is fully functional and deployed as a live demo. It offers a complete MVP for personal expense management, with all intended features implemented. The codebase is well-structured and documented, ready for extension or production use.