https://github.com/krehwell/p-blog
P stands for "personal", what else can it be?. ⚡ Own personal blog with custom CMS to implement Next.js and node back-end. And hey! it supports PWA too.
https://github.com/krehwell/p-blog
blog jamstack mongodb nexjs portfolio-website
Last synced: 11 days ago
JSON representation
P stands for "personal", what else can it be?. ⚡ Own personal blog with custom CMS to implement Next.js and node back-end. And hey! it supports PWA too.
- Host: GitHub
- URL: https://github.com/krehwell/p-blog
- Owner: krehwell
- License: other
- Created: 2021-02-20T23:40:13.000Z (about 4 years ago)
- Default Branch: master
- Last Pushed: 2022-09-21T15:23:52.000Z (over 2 years ago)
- Last Synced: 2025-03-27T01:34:31.715Z (28 days ago)
- Topics: blog, jamstack, mongodb, nexjs, portfolio-website
- Language: JavaScript
- Homepage: https://krehwell.com
- Size: 946 KB
- Stars: 44
- Watchers: 2
- Forks: 3
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# P-Blog
A Personal-Blog so that I follow the trend of those dev/s writing their opinion on a place nobody even care of.
**LINK:** [https://krehwell.com](https://krehwell.com)
## Project Structure
```bash
P-Blog
|- frontend
|- website/
|- rest-api/
|- admin
|- website/
|- rest-api/
```
- **`frontend/`** is the blog.
- **`admin/`** is the CMS.
## `.env` Structure
every `rest-api/` on front-end and admin has an environment variable (`.env` file) that consist of string for MongoDB config:
```
DB_USERNAME=usernameofmongodb
DB_PASSWORD=passwordofmongodb
```
Make sure to update MongoDB string URI as well in each `rest-api/index.js` on front-end and admin:
```javascript
/// DB CONNECTION
const mongoString = `mongodb+srv://${process.env.DB_USERNAME}:${process.env.DB_PASSWORD}@coding-blog.rv1qo.mongodb.net/blog?retryWrites=true&w=majority`; // alter following your DB URI
```
## Frontend
```bash
|- frontend
|- website/
|- rest-api/
```
### `frontend/website`
**`pages/`**: Routes to all pages.
**`api/`**: Directory which defined all function to fetch from server e.g: `getAllBlogPost.js`. Later on each page which need to access db can just call this function and organized the data gotten in its particular Component. (all function inside `api/` is solely for retrieving data from db)
**`Utils/`**: Consist a helper for easing the definition of variable. e.g: `apiBaseUrl.js` is for defining the name of url for the server site either its locally from localhost or from the website url when on production.
### `frontend/rest-api`
**`index.js`**: This is a setup where dependecy and config goes (connect db, cors config, etc).
**`routes/`**: Directory consists files to access endpoint. (`index.js` and `api.js`)
inside `routes/index.js` consists the definition on the route name e.g:
```javascript
const api = require("./api.js");
app.get("/posts/get-all-blog-posts", (req, res) => {
api.getAllBlogPosts((apiResponse) => {
res.json(apiResponse);
});
});
```
and `routes/api.js` is where the prosessing for the backend goes like fetching db etc.
```javascript
module.exports = {
getAllBlogPosts: (callback) => {
// fetch db...
callback(posts);
},
};
```
## Admin
This is CMS for making a new, modify, or delete a blog post.
```bash
|- admin
|- website/
|- rest-api/
```
**np**: all pages on admin site use serverside rendering.
### `admin/website`
_The workflow the same as frontend..._
### `admin/rest-api`
_The workflow the same as frontend..._