Journal Blog App

Live at https://frontend-blog-site.onrender.com/

Stack | ReactJS, Material, NodeJS, ExpressJS, MongoDB, Render, Cloudfare Pages

App Preview

App Architecture

• A Journal Blog application that provides users with a simple and intuitive way to create, manage, and publish their own blog content and explore other's content aswell.
• App is developed utilizing the ReactJS framework and deployed on a high-performance Cloudfare CDN for lower latency. Its designed with Material UI, ensuring responsive and consistant cross platform design.
• Backend is an ExpressJS server, executed on a Node runtime environment on Render PaaS, with Auth using JWT.
• A low latency MongoDB NoSQL document-based database was chosen to store the App Users, Blog and Images data. Its deployed on the Atlas cloud cluster and accessed via the Mongoose database client.

Run Locally

Client

• install nodejs along with npm
• clone repository using git clone https://github.com/rkmdCodes/Blog-Journal-App.git
• cd into client by cd client
• Make Axios point to your local backend server
• run npm install to install the dependencies
• run npm start to run the local development server
• run npm run build for the production build in client/dist

Backend

• install nodejs along with npm
• clone repository using git clone https://github.com/rkmdCodes/Blog-Journal-App.git
• cd into server by cd server
• Make Mongoose and GridFS point to your MongoDB server
• Add .env file your Auth details
• run npm install to install the dependencies
• run npm start to run the local development server

Additional Notes on File storage :

• When the client frontend requests an image file, Multer GridFS checks if the file exists in the MongoDB Atlas cluster by searching the gfs.files collection using Mongoose's findOne() method. If the file is present, Multer GridFS retrieves the file object and creates a URL using Express to stream the file chunks from MongoDB Atlas to the client.
• When the URL is accessed by the client, Multer GridFS opens a GridFS read stream using the openDownloadStream() method of the GridFSBucket object and passes in the _id of the file object. This creates a read stream for the file data stored in MongoDB Atlas, which is then piped to the client response object using the pipe() method.
• By streaming the file data in chunks, Multer GridFS is able to efficiently and scalably handle large image files without having to load the entire file into memory at once.