SightStack Front-End

SightStack is an educational game application designed to help children improve their learning abilities through fun games. This project is the front-end part of SightStack, built using React and TypeScript.

Project Structure

project-root/ ├── node_modules/ ├── public/ │ ├── background.jpg │ ├── avatar9.jpg │ └──... (other public assets) ├── src/ │ ├── assets/ │ │ └──... (other assets) │ ├── components/ │ │ ├── Background.css │ │ ├── Background.tsx │ │ ├── DailyGame.css │ │ ├── DailyGame.tsx │ │ ├── Game.css │ │ ├── Game.tsx │ │ ├── LogIn.css │ │ ├── LogIn.tsx │ │ ├── MainHome.css │ │ ├── MainHome.tsx │ │ ├── NavBar.css │ │ ├── NavBar.tsx │ │ ├── Popup.css │ │ ├── Popup.tsx │ │ ├── Rules.css │ │ ├── Rules.tsx │ │ ├── SignUp.css │ │ ├── SignUp.tsx │ │ ├── UserInfo.css │ │ ├── UserInfo.tsx │ │ └──... (other component files) │ ├── App.css │ ├── App.tsx │ ├── index.css │ ├── main.tsx │ ├── vite - env.d.ts │ └──... (other source files) ├──.gitignore ├── index.html ├── package.json ├── tsconfig.json ├── vite.config.ts └──... (other configuration files)

Installation and Running

Clone the Repository

Project Dependencies

React React Router DOM Axios TypeScript Vite

Code Style and Quality

This project uses ESLint for code linting to ensure code style and quality.

Main Features

User registration and login Display user information and achievements Game interface with drag-and-drop letters to form words Daily game mode Leaderboard

Contributing

Contributions are welcome! Please fork this repository and submit a pull request.

avatar

https://i.ibb.co/jmH8r5g/avatar0.jpg https://i.ibb.co/WvRgFxbd/avatar1.jpg https://i.ibb.co/Swn05jYX/avatar2.jpg https://i.ibb.co/5hwc44ZP/avatar3.jpg https://i.ibb.co/GzxyRcK/avatar4.jpg https://i.ibb.co/cS3S1kyv/avatar5.jpg https://i.ibb.co/Fk61BdrT/avatar6.jpg https://i.ibb.co/Cp1gKfLW/avatar7.jpg https://i.ibb.co/hFv9vsc9/avatar8.jpg https://i.ibb.co/zVk7b91j/avatar9.jpg