Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/mehmetbozkir/react-blog-interview
:airplane: Interview Case | Blog Website | Plain and Simple Nextjs.
https://github.com/mehmetbozkir/react-blog-interview
clean-code component eslint eslint-config interview nextjs npm react-icons reactjs tailwindcss yarn
Last synced: 13 days ago
JSON representation
:airplane: Interview Case | Blog Website | Plain and Simple Nextjs.
- Host: GitHub
- URL: https://github.com/mehmetbozkir/react-blog-interview
- Owner: MehmetBozkir
- License: mit
- Created: 2024-11-02T20:03:49.000Z (about 2 months ago)
- Default Branch: main
- Last Pushed: 2024-11-04T19:09:23.000Z (about 2 months ago)
- Last Synced: 2024-11-12T16:45:02.441Z (about 1 month ago)
- Topics: clean-code, component, eslint, eslint-config, interview, nextjs, npm, react-icons, reactjs, tailwindcss, yarn
- Language: JavaScript
- Homepage: https://react-blog-interview-x.netlify.app/
- Size: 3.11 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# React Blog Interview
# :england: EN
Case Study | Blog Website | Simple and Minimalistic Next.js
## :link: Demo
- View and explore the live demo of the site on Netlify.
:wrench: Features
------------------------------
- **Responsive Design**: All components are developed with responsive design principles.
- **Image Optimization**: All images are in .svg format to maintain quality and ensure they are lightweight.
- **Icons**: react-icons package is used for all icons.
- **Directory Structure**: A simple and clear directory structure is maintained at the project root.
- **CSS Framework**: TailwindCSS is used for styling.
- **Background Gradient**: The entire project has a gradient background from yellow at the top to white at the bottom.
- **Development Process**: The development process is managed through branches and commit history, with descriptive messages for each change.
- **SEO and Meta Information**: SEO settings and meta information are configured for the project.
- **Favicon**: A favicon has been added to the project.
- **Section2 - Hover Effect**: Hover effect is applied to cards in Section2.
- **Section4 - Carousel**: embla-carousel-react library is used for moving cards in Section4, with simplified code.
- **Section5 - Mobile Scroll**: Section5 headers are horizontally scrollable on mobile view.
- **Section5 - Clickable Headers**: Headers in Section5 are clickable, with click events added.
- **Section6 - Card IDs**: Each card in Section6 has a customizable and unique identifier.
- **Section6 - Clickable Points**: All interactive points in Section6 are clickable.
## :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-blog-interview.git
# Navigate to the repository
$ cd react-blog-interview
# Install dependencies
$ npm install
# Run the application
$ npm run dev
```
# :tr: TR
Vaka Çalışması | Blog Web Sitesi | Sade ve Basit Nextjs.
## :link: Demo
- Netflify sitenin bir demosunu kendiniz görmek ve incelemek için.
:wrench: Özellikler
------------------------------
- **Duyarlı (Responsive) Tasarım**: Tüm bileşenler responsive tasarım ilkelerine uygun olarak geliştirilmiştir.
- **Görsel Optimizasyonu**: Kullanılan tüm görseller, hafif olmaları ve piksel bozulmalarını önlemek amacıyla .svg formatında seçilmiştir.
- **İkonlar**: Tüm ikonlar için react-icons paketi kullanılmıştır.
- **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.
- **Arka Plan Rengi**: Tüm projeye yukarıdan sarı ile başlayıp aşağıda beyazla biten bir gradyan arka plan uygulanmıştır.
- **Geliştirme Süreci**: Proje geliştirme süreci branch’ler ve commit history üzerinden yürütülmüş olup, her commit değişiklik açıklamaları içermektedir.
- **SEO ve Meta Bilgileri**: Projenin meta bilgileri ve SEO ayarları yapılmıştır.
- **Favicon**: Projeye favicon eklenmiştir.
- **Section2 - Hover Efekti**: Section2 bölümündeki kartlara hover efekti eklenmiştir.
- **Section4 - Carousel**: Hareketli kartlar için embla-carousel-react kütüphanesi kullanılmış ve kod sadeleştirilmiştir.
- **Section5 - Mobil Kaydırma**: Section5’teki başlıklar, mobil görünümde yatay kaydırma özelliği ile kullanılabilir.
- **Section5 - Tıklanabilir Başlıklar**: Section5 bölümündeki başlıklara click eventi eklenmiş olup başlıklar tıklanabilir durumdadır.
- **Section6 - Kart Kimlikleri**: Section6 kısmındaki kartların her biri, özelleştirilebilir ve benzersiz bir kimliğe sahiptir.
- **Section6 - Tıklanabilir Noktalar**: Section6 bölümündeki tüm etkileşimli noktalar tıklanabilir hale getirilmiş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-blog-interview.git
# Depoya gidin
$ cd react-blog-interview
# Bağımlılıkları yükleyin
$ npm install
# Uygulamayı çalıştırın
$ npm run dev
```