Ranking App

By Mickaël Lalanne

Table of Contents

1. About The Project
   • Built With
2. Getting Started
   • Prerequisites
   • Installation
3. 👷 Backend utilities
   • How to debug in VS Code
   • Handle changes in the backend architecture
4. 📋 Tests
   • Jest - Unit tests
   • Cypress - End To End tests
5. Contact
6. Acknowledgments

About the project

Ranking App is a web application allowing users to create their own templates and tierlists.
First, users create their templates by setting a name, tiers and elements they want to rank.
Then, they use their templates to create tierlists. Users can save the result and even download it as a PNG image.

(back to top)

Built With

• 
• 
• 
• 
• 
• 
• 

And also Clerk for authentication and Cloudinary for image management.

(back to top)

Getting Started

Prerequisites

• Nodejs
• .NET
• PostgreSQL
  With a Ranking_App_DB database, use the setupDB.sql script to initialize the database schema
• Entity Framework

  dotnet tool install --global dotnet-ef --version 7.*

Installation

1. Clone the repo

   git clone https://github.com/mickael-lalanne/ranking-app.git

2. Install client dependencies

   cd client
   npm install

3. Store the sensitive data in the local secret store

   cd ..
   dotnet user-secrets init
   dotnet user-secrets set "Cloudinary:CloudName" "<cloud_name>"
   dotnet user-secrets set "Cloudinary:ApiKey" "<api_key>"
   dotnet user-secrets set "Cloudinary:ApiSecret" "<api_secret>"
   
   dotnet user-secrets set "Clerk:Authority" "<clerk_authority>"
   dotnet user-secrets set "Clerk:AuthorizedParty" "https://localhost:44412"

   FYI : in production, those values should be stored in Environment variables with the following syntax : "Cloudinary__CloudName" or "Clerk__Authority"
   Cf Configuration keys and values
4. Run the app locally

   dotnet run

(back to top)

👷 Backend utilities

How to debug in VS Code

1. Set a breakpoint
2. Press F5

Handle changes in the backend architecture

• When a change is made (to a model or a controller for example)

1. Create a migration

   dotnet ef migrations add your_migration_name --context RankingAppDbContext

2. Then, update the database

   dotnet ef database update --context RankingAppDbContext

• When a change needs to be reverted

1. First, update the database by specifying the last migration name

   dotnet ef database update your_migration_name --context RankingAppDbContext

2. Then, remove the migration (it will delete all corresponding files contained in the "Migrations" folder)

   dotnet ef migrations remove --context RankingAppDbContext

• To revert the initial migration, use 0 instead of the migration name

  dotnet ef database update 0 --context RankingAppDbContext

(back to top)

📋 Tests

Jest - Unit tests

• Run a specific test

  npm test -- your_file_name.tsx

• Run all tests

  npm test

Cypress - End To End tests

• Run a specific test

  npx cypress run --spec cypress/e2e/your_test_name.cy.ts --env type=base --browser chrome

• Run tests in the cypress console

  npm run cypress:open

• Change base screenshots used for visual testing

  npm run cypress:takeBaseScreenshots

Contact

Mickaël Lalanne - mickael.lalanne03@gmail.com

(back to top)

Acknowledgments

• Entity Framework
• Building a Robust ASP.NET Core Web API with PostgreSQL
• Create a React App with .NET 5 API Backend in VSCode (Entity Framework Core & Postgres)
• Tutorial: How to Use C# with React and TypeScript
• Safe storage of app secrets in development in ASP.NET Core
• Using GitHub Actions For CI/CD with .NET Core 5 and AWS Elastic Beanstalk)
• Clerk SDK for .NET by Hawxy
• Adding a custom domain for the AWS Elastic Beanstalk application using Route 53.

(back to top)