A modern flashcard application built with Web Components, featuring Firebase authentication and a clean, responsive interface.
🌐 Live at: memora.tiberiusgh.com
- Authentication: Multi-provider login (Google, GitHub, Facebook) with Firebase Auth. With account linking between different providers.
- Collection Management: Create, edit, and organize flashcard collections
- Review Modes: Sequential and random card review with bookmark functionality
- Public Collections: Browse and add community-created flashcard sets
- Settings: Comprehensive collection and card management
- Responsive Design: Works seamlessly across desktop and mobile devices but mainly developed with desktop interface in mind for now.
- Frontend: Vanilla JavaScript with Web Components
- Authentication: Firebase Auth
- Styling: CSS with shadow DOM encapsulation
- Build Tool: Vite
- Containerization: Docker
- Node.js
- npm
- Docker (optional)
-
Clone the repository
git clone https://github.com/Memora-Tiberiusgh/frontend.git cd frontend -
Install dependencies
npm install
-
Environment Setup Create a
.envfile in the root directoryVITE_API_BASE_URL=your_backend_api_url
-
Start development server
npm run dev
The application will be available at
http://localhost:5173
The application can be containerized for both development and production environments. The easiest way to run the complete Memora stack (frontend, backend, and database) is through the docker-compose file provided in the orchestrator repository:
Using Docker Compose (Recommended):
# Clone the orchestrator repository
git clone https://github.com/Memora-Tiberiusgh/orchestrator
cd orchestrator
# Follow the setup instructions in the orchestrator README
# This will start the entire Memora application stackManual Docker Build (if needed):
# Development
docker build -f Dockerfile.dev -t memora-frontend-dev .
# Production
docker build -f Dockerfile.prod -t memora-frontend-prod .npm run build
npm run previewThe application uses Firebase for authentication with the following providers:
- Google OAuth
- GitHub OAuth
- Facebook OAuth
Firebase configuration is located in src/services/firebase.js. Update the configuration object with your Firebase project credentials.
The application communicates with Memora's backend API. Set the VITE_API_BASE_URL environment variable to your API endpoint. For backend setup and documentation, see the Memora Backend Repository.
API Endpoints Used:
GET /api/v1/collections- Fetch user collectionsPOST /api/v1/collections- Create new collectionGET/POST/PATCH/DELETE /api/v1/flashcards- Manage flashcardsGET /api/v1/collections/public- Browse public collectionsPOST /api/v1/users- User creation/update
The application is built using native Web Components with Shadow DOM for style encapsulation:
- memora-app: Root application component handling routing and authentication
- memora-login: Authentication interface with multiple OAuth providers
- memora-main: Main dashboard with collection management
- memora-collection: Collection creation wizard
- memora-review: Flashcard study interface
- memora-settings: Collection and flashcard management
- memora-public: Public collections browser
- Components use Shadow DOM for style encapsulation
- Event-driven communication between components
- No external frameworks - vanilla JavaScript only
Main login interface
Flashcard review interface with bookmark and random mode features
A gif showcasing the application interface
- Fork the repository
- Create a feature branch
- Make your changes
- Test thoroughly
- Submit a pull request
This project is licensed under the MIT License.
For issues and feature requests, please visit our GitHub Discussions or contribute to the project at GitHub organization.
Tiberius Gherac - tiberius.gherac@gmail.com
First-year Web Development Student @ Linnaeus University
GitHub: @TiberiusGh