This is a Next.js project with TailwindCSS

SunnyQ is an online quiz platform that enables teachers to host quizzes and share. Students can join the room and answer questions in real-time.

Features

• Online Quiz created by host
• Data anaylst

Installation

Install portfolio with yarn

  yarn install

Linting

ESLint

  yarn lint

Formatting

  yarn format

Running in development mode

Start the server

  yarn dev

You can start editing the page by modifying app/page.tsx. The page auto-updates as you edit the file.

This project uses next/font to automatically optimize and load Inter, a custom Google Font.

Open http://localhost:3000 with your browser to see the result.

Tech Stack

Client: React, Next, TailwindCSS

Server: Socket.io

Project: ESlint,Husky,Prettier (formatting)

Acknowledgements

• Code formatting
• husky
• react icon

Layer

Components	z-index
header	40

TailwindCSS Style

Screen

Components	min-width
sm	640px
md	768px
lg	1024px

REMARK

only use lg: is ok,the rest will be marked as small screen

// min screen width will be 10/12 of full screen (phone) , big screen wiil be width 100% (desktop)
<div className='absolute top-0 left-0 w-10/12  h-screen bg-white text-black z-40  lg:relative lg:w-full lg:h-full'>
  ...
</div>

License & Copyright

MIT

Developed By:

Alex Lam Github

Winter Lau Github

2024-08-12