Skip to content

⚡ A portfolio website built using ASP.NET Core Web API and Vue JS

License

Notifications You must be signed in to change notification settings

SaraRasoulian/DotNet-WebAPI-Vue-Portfolio

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Personal Portfolio Website ⚡

A portfolio website with admin panel. The backend is built with ASP.NET Core Web API, the frontend with Vue JS, and the database with PostgreSQL.

This is a learning project and it showcases the implementation of several software development practices such as clean architecture, design patterns and test-driven development.

In a real-world scenario, these practices should be chosen based on the specific requirements of each project.

Demo 🚀

Home page

Home -

Admin panel

Admin new

Admin Panel Sections

  • Profile
  • Experiences
  • Educations
  • Social links
  • Messages
  • Login
  • Change password
Screenshots of Admin Panel 📸

Login page

Social links page

Messages page

Admin panel - Mobile

Tech Stack 🛠️

  • Back End

    • ASP.NET Core Web API
    • .NET -v7
    • Entity Framework Core -v7
    • Mapster -v7 for object mapping
    • JWT (JSON Web Token)
    • Clean Architecture
    • Repository Service Pattern
    • Unit of Work Pattern
    • TDD (Test-Driven Development)
    • FakeItEasy for mocking & fake data generating
    • xUnit for unit and integration testing
    • Testcontainers for integration testing
    • Fluent Assertions
  • Front End

    • Vue JS -v3 (Vite-based)
    • Bootstrap -v5 for admin panel UI
    • Axios for API calls
    • Vuelidate for client-side validation
    • Vue-toastification for notifications
    • Skeleton for home page UI
    • HTML -v5
    • CSS -v3
  • Database

    • PostgreSQL -v15
    • Database built via Entity framework migrations (code-first approach)
  • IDE

    • Visual Studio 2022 -v17 for back end development
    • Visual Studio Code for front end development

Assets 🗃️

To download the project's UI/UX design file click here. Adobe XD software is required for viewing.

To download the project's database design file click here.

Contributions 🤝

Contributions are appreciated. If you identify areas for improvement, please feel free to create an issue or submit a pull request. For any questions or suggestions, please create an issue.