Backups (in progress)

This app will let you store images and leveling up your account to gain benefits.

Features already implemented:

• Secure flow for auth
• Password recovery system via email
• Dashboard displaying stats about user storage
• Editable profile with bio, online status, and sections for uploads
• Storage based on user uploads
• Optimized images with Cloudinary SDK
• Admin Dashboard to manage users and their profile

Features in progress:

• Level system that will grant benefits
• Daily quests to gain more exp and level up

Previews (see all preview images in /assets)

Profile

Dashboard

Stack used

• Typescript
• React
• Redux-toolkit
• Tailwind
• Recharts
• Axios
• Tanstack router / Tanstack Query
• Zod
• Node/Express
• Mysql
• BetterAuth
• Cloudinary
• Prisma
• Vitest

Architecture

• Backend: Clean Architecture with SOLID principles
• Frontend: Feature-based Architecture

How to setup repository locally

• Use npm install to install all dependencies in the backend and frontend folder
• Configure .env file for backend and frontend

Database setup

• You must have installed mysql on your computer and run its service (W+R -> services.msc -> run/stop mysql service), you can also use MySQLWorkbrench for a better view (you'll need to connect the schema to the db with the credentials)
• All the DDL's for tables are in backend\src\db\db_DLL.md

Cloudinary Storage setup

• Create account in https://cloudinary.com, then "View API keys" to see your credentials and put them in /backend/.env

Scripts

• dev: npm run dev <- if there are typescript errors, this run will fail and ask you to fix them
• build dist: npm run build <- create dist folder ready for production
• vite preview: npm run preview <- run the production dist files in a local server
• lint: npm run lint <- run linter
• tests: npm run test <- run tests
• coverage: npx vitest run --coverage <- create coverage