MVP: Eng Design Doc - michellbrito/css-trivia GitHub Wiki

Problem Context

CSSTrivia.com aims to be a comprehensive online platform for CSS enthusiasts, web developers, and learners who seek to test and improve their knowledge of CSS through engaging trivia challenges. The platform intends to cater to a wide range of users, from beginners looking to grasp the basics of CSS to experts aiming to refine their skills.

Proposed Solution

CSSTrivia.com will be developed as a responsive web application with the following features:

  • User Authentication: Users will have the ability to sign up and log in, creating a personalized experience with trackable progress.

  • Trivia Question Access: A comprehensive collection of CSS trivia questions will be available, with users able to view and select trivia by topics.

  • Interactive Trivia Gameplay: Users can select a trivia topic, answer questions, and receive immediate feedback. The system will accommodate multiple-choice questions and allow users to select multiple options where applicable.

Goals and Non-Goals

  • As a user I'm able to sign up
  • As a user I'm able to login
  • As a user I'm able to view all the available trivia questions
  • As a user if I click a specific trivia I'm taken to that trivia

Topics

  • CSS Selectors
  • CSS Box Model
  • CSS Layout
  • CSS Flexbox
  • CSS Grid
  • CSS Transitions and Animations
  • CSS Responsive Design

Design

Tech Stack:

  • vuejs, nodejs, mysql, sequelize, pinia

Database Schema:

csstrivia com

Routes

Frontend:

  • / -> displays homepage
  • /topics -> displays all the available trivia
  • /topic/:name -> displays a specific trivia page related to the topic
  • /leaderboard -> displays the leaderboard page
  • /login -> displays the login page
  • /signup -> displays the sign-up page

Backend:

  • /api/topic/:name -> returns the trivia for that specific topic
  • /api/login -> verify credentials and redirect to the logged-in page
  • /api/signup -> creates a new user and redirects to the logged-in page
  • /api/leaderboard -> returns leaderboard data