LexiFlash - Modern Flashcard App with Vue 3 and MongoDB
LexiFlash - Frontend
Repository: GitHub - LexiFlash-frontend
LexiFlash is a flashcard-based web app designed to support fast and distraction-free learning of vocabulary, concepts, or terminology - whether you’re studying a language or brushing up on tech skills.
This repository contains the frontend part of the app, developed in Vue 3 using Composition API and Pinia for state management. The UI is clean, mobile-friendly, and designed with simplicity in mind, allowing users to focus on learning without unnecessary clutter.
Tech Stack (Frontend)
- Vue 3 - Composition API for modular, clean logic
- Pinia - Centralized state management for decks, flashcards, and session state
- Vite - Fast build tool and dev server
- Tailwind CSS - Utility-first CSS framework
- TypeScript - Type safety for components and stores
Full Stack Architecture
While this repo is frontend-only, the app is part of a full stack project. The backend is built in Node.js + Express with a MongoDB database. All flashcard data, decks, and user-related content are persisted in Mongo using a REST API exposed by the backend.
The frontend communicates with this API to fetch, create, update, and delete cards and decks - with optimistic UI updates to keep the interface responsive.
Core Features
- Browse decks and categories
- Create, edit, and delete flashcards
- “Study mode” with randomized card selection
- Lightweight tagging system
- Local state caching and sync with backend
- Fully responsive, touch-friendly interface
Motivation
I created LexiFlash out of frustration with bloated flashcard apps that force sign-ups, show ads, or lock core features behind paywalls. I wanted a tool that I could fully control - with a fast frontend, open data model, and no distractions.
It also serves as a tech sandbox, where I test ideas around state modeling, modular frontend architecture, and building maintainable full-stack apps.
Roadmap
- User authentication and profile-based flashcard storage
- CSV import/export
- Statistics & spaced repetition engine (SM2 or similar)
- Unit and e2e tests
- Progressive Web App support (offline study sessions)
Development Notes
Everything in the frontend is built to be decoupled and reusable — flashcards, decks, study sessions, and filters are all modeled as Pinia stores. The UI can work with local-only or remote data, which makes development and debugging easier.
If you want to check it out or contribute, here’s the link again:
Bartłomiej Nowak
Programmer
Programmer focused on performance, simplicity, and good architecture. I enjoy working with modern JavaScript, TypeScript, and backend logic — building tools that scale and make sense.
