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:
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