Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/taiseen/next-simple-blog
Next-JS - Simple Blog | Daily-Tuition
https://github.com/taiseen/next-simple-blog
daily-tuition next-js swiper-slider tailwind-css
Last synced: 7 days ago
JSON representation
Next-JS - Simple Blog | Daily-Tuition
- Host: GitHub
- URL: https://github.com/taiseen/next-simple-blog
- Owner: taiseen
- Created: 2022-06-16T00:23:12.000Z (over 2 years ago)
- Default Branch: main
- Last Pushed: 2022-08-12T04:58:55.000Z (over 2 years ago)
- Last Synced: 2023-05-10T18:55:15.909Z (over 1 year ago)
- Topics: daily-tuition, next-js, swiper-slider, tailwind-css
- Language: JavaScript
- Homepage: https://next-simple-blog-bd.vercel.app
- Size: 7.56 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
> 16 - Jun - 2022
## Simple Blog | [Live Link][link]
[link]: https://next-simple-blog-bd.vercel.app
# NextJs + TailwindCss
## Yarn | Dependencies...
|No| Package Installs | Use for... |
|--|---------------------------|---------------------|
| 1| yarn add `swiper` | slider |
| 2| yarn add `react-icons` | icon display at UI |
| 3| yarn add `react-spinners` | loading spinner |
| 4| yarn add `swr` | React Hooks library for remote data fetching |
## Project Structure
🟨
src
├── components
| ├── _child
| | ├── Author.jsx
| | ├── Error.jsx
| | ├── NewsLetter.jsx
| | ├── Related.jsx
| | └── Spinner.jsx
| |
| ├── CategoryPost.jsx
| ├── Footer.jsx
| ├── Header.jsx
| ├── HeroSection.jsx
| ├── index.js
| ├── LatestPost.jsx
| ├── Layout.jsx |🟡| ➕ { children } ➕ |🟡|
| └── MostPopular.jsx
|
|
├── lib |🟠| Fetcher |🟠|
| ├── fetcher.js |🟠| Fetcher |🟠|
| └── helper.js |🟠| Fetcher |🟠|
|
|
├── pages
| |
| ├── api |🟨| BackEnd |🟨|
| | | |🟨| BackEnd |🟨|
| | ├── db |🟨| BackEnd |🟨|
| | | └── data.js |🟨| BackEnd |🟨|
| | | |🟨| BackEnd |🟨|
| | ├── popular |🟨| BackEnd |🟨|
| | | ├── index.js |🟨| BackEnd |🟨|
| | | └── [id].js |🟨| BackEnd |🟨|
| | | |🟨| BackEnd |🟨|
| | ├── post |🟨| BackEnd |🟨|
| | | ├── index.js |🟨| BackEnd |🟨|
| | | └── [id].js |🟨| BackEnd |🟨|
| | | |🟨| BackEnd |🟨|
| | ├── trending |🟨| BackEnd |🟨|
| | | ├── index.js |🟨| BackEnd |🟨|
| | | └── [id].js |🟨| BackEnd |🟨|
| | | |🟨| BackEnd |🟨|
| | └── index.js |🟨| BackEnd |🟨|
| |
| |
| |
| ├── popular
| | └── [id].js
| |
| ├── post
| | └── [id].js
| |
| ├── trending
| | └── [id].js
| |
| ├── _app.js |✅| |✅|
| └── index.js
|
|
|
└── styles
└── globals.css
🟨
## Learning context by developing this app:
|No| Context learn by building this project... |
|--|----------------------------------------------------|
| 1| Layout Component architecture |
| 2| Responsive thinking... `w-fit - sm:w-96` |
| 3| `flex-wrap-reverse` equivalent into `grid - order` |
| 4| `swiper slider` > usage, importing jsx + css files |
| 5| `swiper slider` > navigation |
| 6| `swiper slider` > pagination |
| 7| `swiper slider` > autoPlay interaction... |
| 8| `swiper slider` > responsive breakpoints |
| 9| `swiper slider` > bullet pointer `color change` |
|10| `swiper slider` > navigation handle `color change` |
|11| Fav icon set > `Layout > Head > link` <> `public/fav.ico` |
|12| set `padding bottom` at swiper slider container for `bullet pointer` go little down |
|13| Functional style, JXS written (modular system) & call that for displaying at UI |
|14| `BackEnd` > Folder Structure + File naming convention meaning |
|15| `BackEnd` > Folder name become `URL endpoint` &... |
|16| `BackEnd` > then inside this Folder must have `index.js` file for `default response` from this `URL endpoint` |
|17| Tailwind CSS + `Custom CSS` writing together |
|18| Custom Spinner Component + Loader animation create |
|19| Custom Error Component |
> * now i can create my own API EndPoint for accessing BackEnd Data...
> * & fetch those Data from FrontEnd... for displaying into UI...