https://github.com/khanhduzz/nextjs-ver2
Just a mini NextJs for learning
https://github.com/khanhduzz/nextjs-ver2
jquery nextjs session-cookie typescript
Last synced: 2 months ago
JSON representation
Just a mini NextJs for learning
- Host: GitHub
- URL: https://github.com/khanhduzz/nextjs-ver2
- Owner: khanhduzz
- License: mit
- Created: 2024-11-13T02:19:20.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2025-04-16T15:36:15.000Z (about 1 year ago)
- Last Synced: 2025-04-16T22:58:12.607Z (about 1 year ago)
- Topics: jquery, nextjs, session-cookie, typescript
- Language: CSS
- Homepage:
- Size: 8.08 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# NextJs mini... 🍁
A mini website to learn how to create a website with NextJs
## Technology:
- NextJs
- Session cookie
- JQuery
## Structure
- Using `Page Router`
- Authenticate with `middleware.ts`
- The structure:
```
.
├── commons/
│ ├── components/
│ └── images/
├── modules/
│ ├── articles/
│ ├── authentication/
│ ├── contact/
│ └── home/
├── pages/
│ ├── about/
│ ├── admin/
│ ├── api/
│ ├── articles/
│ ├── blog/
│ ├── category/
│ ├── contact/
│ ├── login/
│ ├── style/
│ ├── _app.tsx
│ ├── _document.tsx
│ └── index.tsx
├── publics/
├── styles/
└── middleware.ts
```
## Admin account
- Default admin account:
```
username: admin
password: password
```
## Functionality
#### General:
- Pagination, Filter with category, type of articles
#### Anonymous user:
- View all articles in homepage, filter by category, filter by type (video, audio,...), send contact to the admin in the contact page
- Search articles based on the articles name.
#### Admin:
- Login with admin account and able to see the user's contact in `Contacts` page.
- Search articles based on the articles name.
## Workflow:
#### Articles load and pagination:
_This website does not use database, the hardcode data is using instead._
- Article use api in `pages/api/articles/` (for both single article or articles with pagination) to fetch data in `/modules/articles/Data.tsx`.
#### Login:
- User go to `login page` -> login with default account
- `Login page` -> request to server -> `POST api/auth/login/` -> confirm infomation -> save to `Session cookie` with expire time is 3600s.
- Every time load page, client take user information in `Session cookie` -> `GET api/auth/` -> server to validate user information.
#### Logout:
- User click logout -> `POST api/auth/logout/` -> Remove information in `Session cookie`, redirect to homepage.
#### Contacts:
- User send contact to server: `POST api/contact-form` -> save data to `Session cookie` with time out is 3600.
- Admin get contacts: `GET api/contact-form` -> get all contacts with pagination.
## Page url:
- Homepage: `localhost:3000`
- Single article: `localhost:3000/articles/[id]`
- Category: `localhost:3000/category/`
- Specific category: `localhost:3000/category/[slug]`
- Blog: `localhost:3000/blog/`
- Contact for user: `localhost:3000/contact/`
- View user's contacts: `locahost:3000/admin/contacts/`