Dream Blogger

A Full-stack Web App made as a part of a RobotDreams course.

DreamBlogger is a web application that uses latest frameworks functionalities for building apps. It has features like efficient SSR page loading, EJS Templates, User Authentication with GitHub, comments and blog posts...

Frontend:

• TailwindCSS, EJS & Next.js

Backend:

• MongoDB, Express.js & Joi

Schema

Features

• User Login and JWT Auth
• First Blog post
• Users can log in, create new post and comment.
• Quick search for a posted blog
• TailwindCSS template

Documentation

Frameworks used:

• MongoDB Methods
• Joi Schema Validation
• Next.js
• EJS
• TailwindCSS

Development

To run the project locally you can:

1. Clone this repository

  git clone git@github.com:nightguarder/DreamBlogger.git 

2. Navigate to the repository & Install dependencies:

 cd DreamBlogger
   npm install 

3. For development mode with live reloading run:

 npm run dev 

3. To build and start the project in production mode, run:

npm run start

Notes

EJS

• Is a template engine for Express.js that uses views directory that employs dynamic content rendering on the server-side and loads only the HTML content to the client.
• Layout EJS uses its own view engine to display your templates (views) that are divided into 3 main sections {pages, partials, layouts}
• Again it was difficult to figure out on the first try, but I managed to handle it since it sorta works like Svelte. In your views directory you can utilize directories with .ejs layout, pages, partials.
• partials: partials are code blocks that are reused many times such ass header, footer, navbar
• Routing: res.render('.ejs location starting under views/... ', { variables, data etc. });

Static files

• In order to allow the user render css, img, scripts that you create in your /public folder you need to serve them to the client.
• To serve static files such as images, CSS files, and JavaScript files, use the Express.static built-in middleware function in Express.

ExpressJS

• Middleware func should be handled at the end of the Express App configuration.
• Don't forget to

TailwindCSS

• Managing TailwindCSS classes and building templates without a component library can be difficult and very time consuming. Previously I had experience building with Daisy UI but this wouldn't fit the theme of the blog.
• Therefore, I choose Preline an open-source component library that is minimalistic and has some free example templates to build from.

MongoDB

• MongoDB connection is handled with MongoConnect.ts service
• For each new node ver. they update connection setup, always check current state: Connection MongoDB Atlas
• The URI must exactly match this format:

mongodb+srv://<username>:<password>@dreamblog.rgmr5q5.mongodb.net/?retryWrites=true&w=majority&appName=DreamBlog

• NOTE :
  • exclude brackets <> when setting up the username and password
  • If you try to connect to this db you will be rejected since it's configured only for my IP Adresss...