Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/romabulani/bakinmania

Bakin Mania - The Quiz App on cakes, baking and desserts.
https://github.com/romabulani/bakinmania

css3 html html-css-javascript javascript

Last synced: 4 days ago
JSON representation

Bakin Mania - The Quiz App on cakes, baking and desserts.

Host: GitHub
URL: https://github.com/romabulani/bakinmania
Owner: romabulani
License: mit
Created: 2022-02-16T13:19:21.000Z (over 2 years ago)
Default Branch: dev
Last Pushed: 2022-02-20T14:14:24.000Z (over 2 years ago)
Last Synced: 2023-03-09T07:41:38.995Z (over 1 year ago)
Topics: css3, html, html-css-javascript, javascript
Language: HTML
Homepage: https://bakinmania.netlify.app/
Size: 655 KB
Stars: 0
Watchers: 2
Forks: 0
Open Issues: 0
Metadata Files:
- Readme: README.md
- License: LICENSE

Awesome Lists containing this project

README

        # [![MuffinUI Logo](https://github.com/romabulani/BakinLane/blob/dev/assets/favicon-32x32.png)](https://bakinmania.netlify.app/) Bakin Mania

[![Open in Visual Studio Code](https://open.vscode.dev/badges/open-in-vscode.svg)](https://open.vscode.dev/romabulani/BakinMania)

![lines of code](https://tokei.rs/b1/github/romabulani/BakinMania)

[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)

## Description

Are you also the foodie? Do you love Cakes and Muffins? Do you know about cakes, desserts and baking? [Bakin Mania](https://bakinmania.netlify.app/) 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

![image](https://user-images.githubusercontent.com/42478246/154845075-6397f6a3-77de-437f-b140-4f415e8aac35.png)

## Features

1. [Home](#home)

2. [Quiz Categories](#quiz-categories)

3. [Rules](#rules)

4. [Question Page](#question-page)

5. [Result Page](#result-page)

6. [Timer](#timer)

7. [Search](#search)

8. [Authentication](#authentication)

9. [Forget Password](#forget-password)

10. [Create Quiz](#create-quiz)

11. [Share Quiz](#share-quiz)

### Home

A [landing page](https://bakinmania.netlify.app/) where the explore and create quiz options are displayed along with the Quiz Categories. Take a look at it.

![bakinmania-home](https://user-images.githubusercontent.com/42478246/154845598-5d2f70d5-5286-4bf5-93da-7d3338809638.gif)

### Quiz Categories

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

### Rules

[Rules](https://bakinmania.netlify.app/src/components/rules/rules.html) are displayed to the user when he/she starts playing the game. Have a look at it.

![bakinmania-rules](https://user-images.githubusercontent.com/42478246/154846464-9f667a2d-aedc-47b8-86ec-1ae0a6e80da8.gif)

### Question Page

In the [question](https://bakinmania.netlify.app/src/components/question/question.html), the question along with the 4 options are displayed to the user. Have a look at it.

![bakinmania-question](https://user-images.githubusercontent.com/42478246/154846521-7bb50a65-10d9-4b9a-89a9-a2353ecba6a4.gif)

### Result Page

On the [result](https://bakinmania.netlify.app/src/components/result/result.html), total score along with the correct answers are displayed to the user. Have a look at it.

![bakinmania-answers](https://user-images.githubusercontent.com/42478246/154846712-2facce16-4285-48b5-aab0-d9a4e1688ece.gif)

### 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](#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](https://bakinmania.netlify.app/src/components/authentication/signup.html), [login](https://bakinmania.netlify.app/src/components/authentication/login.html), [logout](https://bakinmania.netlify.app/src/components/authentication/logout.html) features. Signup and Login pages can be accessed only from [home](https://bakinmania.netlify.app/index.html) page. Logout can be accessed from all the other pages. Take a look.

![bakinmania-authentication](https://user-images.githubusercontent.com/42478246/154846610-0c5d28de-7c5d-4b6f-9da9-c8ae4e57d759.gif)

### Forget Password

Its another feature related to Authentication. It helps the user to reset the password. Check out [here](https://bakinmania.netlify.app/src/components/authentication/passwordreset.html).

### Create Quiz

The create quiz option is available on the [landing](https://bakinmania.netlify.app/) page of the app. 

### Share Quiz

For every category of quiz, there is option to share the quiz on the card.

## Future Enhancements

- LeaderBoard

- Loading & Alerts

- User Profile Page

## Connect with me!

[![Twitter](https://img.shields.io/badge/Twitter-1DA1F2?style=for-the-badge&logo=twitter&logoColor=white)](https://twitter.com/romabulani)

[![Linkedin](https://img.shields.io/badge/LinkedIn-0077B5?style=for-the-badge&logo=linkedin&logoColor=white)](https://www.linkedin.com/in/romabulani/)

[![Hashnode](https://img.shields.io/badge/Hashnode-2962FF?style=for-the-badge&logo=hashnode&logoColor=white)](https://romabulani.hashnode.dev/)