css3 html html-css-javascript javascript

Bakin Mania

Description

Are you also the foodie? Do you love Cakes and Muffins? Do you know about cakes, desserts and baking? Bakin Mania is for you! Its the Quiz Website for cakes, desserts and baking.

Techstack

For making the screens, below techstak is used, in future, the project will be modified with React.

HTML
CSS
Javascript

Best Practices

WebP format of images is used in the Bakin Mania which ensure fast loading and less render blocking.
For CSS, alphabetical ordering of the properties is followed which helps in easy debugging.
Use of reponsive units and media queries to make it Mobile Responsive.
The properties like aria-label and rel are added in anchor tags which increase the accessibility.

Below is the screenshot depicting the performance and best practices

Home

A landing page where the explore and create quiz options are displayed along with the Quiz Categories. Take a look at it.

Quiz Categories

Quiz Categories can be seen on the landing page itself. Have a look at the above GIF.

Rules

Rules are displayed to the user when he/she starts playing the game. Have a look at it.

Question Page

In the question, the question along with the 4 options are displayed to the user. Have a look at it.

Result Page

On the result, total score along with the correct answers are displayed to the user. Have a look at it.

Timer

The Timer is displayed to the user on top of the question while attempting the quiz. It can be seen in the Question Page.

Search

The search functionality is present on all the pages in the navbar which helps the user to find the quiz categories at the tip of the fingers.

Authentication

It covers signup, login, logout features. Signup and Login pages can be accessed only from home page. Logout can be accessed from all the other pages. Take a look.