🌐 Language Learning App

📝 Flashcards for English -> Norwegian translations

🔗 View Online Demo

---

🖼 Screenshots

Landing Page	Courses Page	Edit Profile Page	Profile Page

---

🌟 Overview

Language Learning App is a full-stack development practice project.
The main goal was to build a complete web application using React, TypeScript, ASP.NET Core, and SQL Server, rather than creating a fully functional language-learning platform.

The project was implemented with Clean Architecture, CQRS, Mediator pattern, AutoMapper, and ASP.NET Core Identity for authentication.

Users can practice translations with flashcards, and in the future, the app could be expanded into a real language learning tool.

---

✨ Features

• 🃏 Flashcards for English -> Norwegian translation practice
• 🚀 Course progression: unlock the next course after completing the current one
• 📄 Pagination for Course Page
• 🎨 Clean and interactive UI built with CSS
• 🔒 User authentication & authorization using ASP.NET Core Identity
• 🛠️ Profile page: upload an avatar, edit username and bio

---

🚀 Technologies & Tools

🏗 Architecture & Patterns

---

⚙️ Prerequisites

🐳 Docker installed

---

⚙️ Installation

1. Clone the repository:

git clone https://github.com/yourusername/LanguageLearningApp.git
cd LanguageLearningApp

2. Update the connection string

Edit API/appsettings.json:

"ConnectionStrings": {
  "DefaultConnection": "Server=localhost,1433;Database={YOUR_DB_NAME};User Id=SA;Password={YOUR_PASSWORD};TrustServerCertificate=true;"
}

⚠️ Make sure that:

{YOUR_DB_NAME} matches the database name you want to use (you can create it in Docker or via migrations). {YOUR_PASSWORD} is the same as the SA_PASSWORD set in your docker-compose.yml for the SQL Server container.

3. Start Docker services

From the root of the project (where docker-compose.yml is located):

docker-compose up -d

4. Apply database migrations

cd API
dotnet ef database update -p Persistence -s Api

5. Install frontend dependencies

cd client
npm install

6. Start the backend server

cd API
dotnet run

7. Start the frontend app

cd client
npm run dev

Open http://localhost:3000 in your browser.

---

🎯 Usage

🆕 Register a new account or log in

📖 Select a course and study using flashcards

✅ Complete each course to unlock the next

📊 Track your progress in your profile

---

🗂 Project Structure

client/        # React app with TypeScript and CSS
API/           # ASP.NET Core Web API
Persistence/   # EF Core database context and migrations
Application/   # Business logic
Domain/        # Entities and models
Infrastructure/ # External services, DB access

---

🔮 Future Improvements

• 🌐 Add support for more languages

• 🎯 Improve flashcard functionality with spaced repetition

• 📱 Make the app fully responsive for mobile devices

---

🚀 Deployment

The app is deployed on Azure.