Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/mehmetbozkir/react-quiz-app-interview
:rocket: Interview Case 2 | Quiz App | Plain and Simple Nextjs.
https://github.com/mehmetbozkir/react-quiz-app-interview
axios daisyui fetch framer-motion interview nextjs quiz quizapp react-hot-toast reactjs responsive-web-design seo seo-optimization yarn
Last synced: 13 days ago
JSON representation
:rocket: Interview Case 2 | Quiz App | Plain and Simple Nextjs.
- Host: GitHub
- URL: https://github.com/mehmetbozkir/react-quiz-app-interview
- Owner: MehmetBozkir
- License: mit
- Created: 2024-11-03T20:51:23.000Z (about 2 months ago)
- Default Branch: main
- Last Pushed: 2024-11-04T18:59:07.000Z (about 2 months ago)
- Last Synced: 2024-11-12T16:44:54.692Z (about 1 month ago)
- Topics: axios, daisyui, fetch, framer-motion, interview, nextjs, quiz, quizapp, react-hot-toast, reactjs, responsive-web-design, seo, seo-optimization, yarn
- Language: JavaScript
- Homepage: https://react-quiz-app-interview-x.netlify.app/
- Size: 277 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# React Quiz App Interview
# :england: EN
Case Study 2 | Quiz Application | Simple and Minimalistic Next.js
## :link: Demo
- View and explore the live demo of the site on Netlify.
:wrench: Features
------------------------------
- **Component Design**: DaisyUI package is used for component styling and design.
- **Development Process**: The project was set up using Yarn and is managed with branches and a commit history that includes descriptions for each change.
- **React-hot-toast Notifications**: Integrated react-hot-toast package provides guiding notifications during answer selection.
- **Animations**: Framer-motion package is used to add animations between question cards.
- **Data Fetching**: Axios is used for API data fetching.
- **Responsive Design**: All components are developed with responsive design principles to ensure adaptability across devices.
- **Directory Structure**: A simple and clear directory structure is maintained at the project root.
- **CSS Framework**: TailwindCSS is used for styling.
- **SEO and Meta Information**: SEO settings and meta information are configured for the project.
- **Favicon**: A favicon has been added to the project.
- **Question Creation via API**: Questions are generated using the 'title' endpoint from the API. Ten different titles are selected from 100 available endpoints on each run, ensuring new questions on each attempt.
- **Answer Creation via API**: Correct answers are generated using the 'body' endpoint from the API. Ten different bodies are selected from 100 available endpoints each time, with each question's (title) correct answer (body) fetched from its respective endpoint.
- **Question Timer**: Each question is displayed on screen for 30 seconds with a timer specific to each question.
- **10-Second Restriction**: Answer selection is restricted for the first 10 seconds of each question.
- **Unanswered Questions**: Any question not answered within 30 seconds is marked as unanswered and displayed as such on the result screen.
- **Back Navigation Restriction**: Navigation back to previous questions is disabled.
- **Question Counter**: Displays the current question number during the quiz.
- **Result Screen**: The result screen is optimized for mobile display.
- **UI/UX Design**: The user interface and user experience are designed with attention to detail.
## :book: How to Use
To clone and run this application, you’ll need [Git](https://git-scm.com/downloads) and [ReactJS](https://reactjs.org/docs/getting-started.html) installed on your computer. From your command line:
```
# Clone this repository
$ git clone https://github.com/MehmetBozkir/react-quiz-app-interview.git
# Navigate to the repository
$ cd react-quiz-app-interview
# Install dependencies
$ yarn install
# Run the application
$ yarn next dev
```
# :tr: TR
Vaka Çalışması 2 | Quiz Uygulaması | Sade ve Basit Nextjs.
## :link: Demo
- Netflify sitenin bir demosunu kendiniz görmek ve incelemek için.
:wrench: Özellikler
------------------------------
- **Bileşen Tasarımları**: Component tasarımlarında DaisyUI paketi kullanılmıştır.
- **Geliştirme Süreci**: Proje, Yarn kullanılarak oluşturulmuştur. Branch'ler ve commit geçmişi ile yönetilmiş, her commit değişiklik açıklamaları içermektedir.
- **React-hot-toast Bildirimleri**: Yanıt verirken yönlendirici bildirimler sunmak için react-hot-toast paketi entegre edilmiştir.
- **Animasyonlar**: Soru kartları arasındaki geçişlerde, framer-motion paketi ile animasyonlar eklenmiştir.
- **Veri Çekme**: API’den veri çekmek için Axios kullanılmıştır.
- **Duyarlı (Responsive) Tasarım**: Tüm bileşenler responsive tasarım ilkelerine uygun olarak geliştirilmiştir.
- **Dizin Yapısı**: Proje kök dizininde basit ve anlaşılır bir dosyalama yapısı tercih edilmiştir.
- **TCSS Kütüphanesi**: Stil yönetimi için TailwindCSS kullanılmıştır.
- **SEO ve Meta Bilgileri**: Projenin meta bilgileri ve SEO ayarları yapılmıştır.
- **Favicon**: Projeye favicon eklenmiştir.
- **API ile Soru Oluşturma**: API’de bulunan title endpoint’i soruları oluşturur. 100 endpoint arasından her seferinde farklı 10 adet title seçilerek, her denemede yeni sorular oluşturulur.
- **API ile Cevap Oluşturma**: API’de bulunan body endpoint’i cevapları oluşturur. 100 endpoint arasından her seferinde farklı 10 adet body seçilerek, her denemede yeni sorular oluşturulur. Her sorunun (title) doğru cevabı (body), kendi endpoint’inde bulunan veridir.
- **Soru Süresi**: Her soru ekranda 30 saniye kalır ve her soru için özel çalışan bir zamanlayıcı eklenmiştir.
- **İlk 10 Saniye Kısıtlaması**: Her sorunun ilk 10 saniyesinde işaretleme yapılamaz.
- **Boş Sorular**: 30 saniye boyunca işaretlenmeyen soru, boş olarak kabul edilip sonuç tablosunda boş olarak kabul edilir.
- **Geçmişe Dönüş Engeli**: Geçmiş sorulara dönmek engellenmiştir.
- **Soru Sayacı**: Sınav esnasında kaçıncı soruda olduğunu gösteren bir soru sayacı eklenmiştir.
- **Sonuç Ekranı**: Sonuç ekranı mobil ekranlarda daraltılarak uyumlu hale getirilmiştir.
- **UI/UX Tasarımı**: Kullanıcı arayüzü ve kullanıcı deneyimi tasarıma dikkat edilerek geliştirilmiştir.
## :book: Nasıl kullanılır
Bu uygulamayı klonlamak ve çalıştırmak için bilgisayarınızda [Git](https://git-scm.com/downloads) ve [ReactJS](https://reactjs.org/docs/getting-started.html) yüklü olmalıdır. Komut satırınızdan:
```
# Bu depoyu klonlayın
$ git clone https://github.com/MehmetBozkir/react-quiz-app-interview.git
# Depoya gidin
$ cd react-quiz-app-interview
# Bağımlılıkları yükleyin
$ yarn install
# Uygulamayı çalıştırın
$ yarn next dev
```