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.
For making the screens, below techstak is used, in future, the project will be modified with React.
- HTML
- CSS
- Javascript
- 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
- Quiz Categories
- Rules
- Question Page
- Result Page
- Timer
- Search
- Authentication
- Forget Password
- Create Quiz
- Share Quiz
A landing page where the explore and create quiz options are displayed along with the Quiz Categories. Take a look at it.
Quiz Categories can be seen on the landing page itself. Have a look at the above GIF.
Rules are displayed to the user when he/she starts playing the game. Have a look at it.
In the question, the question along with the 4 options are displayed to the user. Have a look at it.
On the result, total score along with the correct answers are displayed to the user. Have a look at it.
The Timer is displayed to the user on top of the question while attempting the quiz. It can be seen in the Question Page.
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.
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.
Its another feature related to Authentication. It helps the user to reset the password. Check out here.
The create quiz option is available on the landing page of the app.
For every category of quiz, there is option to share the quiz on the card.
- LeaderBoard
- Loading & Alerts
- User Profile Page