Overview

This is a blogging website for an individual user. The user can use the access code to login and upload blog content (Title, image, description). This will be created as a blog page automatically and also added as a thumbnail in the home page where all blogs are present. This is a full stack project developed using MERN stack. AWS S3 is used as an images container and AWS APIs are used for uploading and getting images to the browser.

Demo video of site can be viewed/downloaded from site-demo.mp4 file:

https://github.com/donkadaharsha/BlogSite/blob/main/site-demo.mp4.mp4 Please select 'view raw' to download the file if you are unable to view it.

STEPS FOR THE PROJECT

Below is a step by step guide for you to run this program.

setting up backend:

 npm init -y(inside backend folder) : this cmd will add package.json
 add "type": "module" in package.json to allow ecma script sntax like inport keyword and export keyword
 install express and nodemon: npm i express nodemon
 We use express as framework and nodemon for re-starting server automatically on change
 add:  "scripts": {
"start": "node index.js",
"dev": "nodemon index.js"
 } 
 in package.json.

setting up frontend:

 npm create vite@latest (inside root folder, not frontend): select react and javascript
 cd frontend -> npm i : to install nom packages
 set up tailwind: npm install -D tailwindcss postcss autoprefixer
                 npx tailwindcss init -p
                paste : content: [
                "./index.html",
                "./src/**/*.{js,ts,jsx,tsx}",
                     ] 
                     in tailwind .config file
                paste: @tailwind base;
                       @tailwind components;
                       @tailwind utilities;
                          in index.css
 install react-router-dom: npm i react-router-dom
 install axios for http requests: npm i axios
 install react-icons for icons: nom i react-icons
 

setting up database:

 install mongoose library(to connect to mongodb database): npm i mongoose
 add mongodb connection url in config file: export const mongodbURL =''
 import mongoDBURL in index.js and add mongoose.connect to listen to database:
                               mongoose
                               .connect(mongoDBURL)
                               .then(()=>{
                                    app.lisen();
                               })
                               .catch((error) =>{
                                    console.log(error);
                               })
 create a mongoose model: create all models in model folder(a better way!)
 What is mongoose? :
 Mongoose is an ODM (Object Data Modeling) library for MongoDB and Node.js. 
 It provides a higher-level, schema-based abstraction over the raw MongoDB driver. 
 Mongoose allows developers to define data models with schemas and work with MongoDB 
 in an object-oriented manner.
 create mongoose schema using: # mongoose.Schema({title: {type:string, required:true,}},{publishYear: {type:Number,} });
 To use the schema: export const Blog = mongoose.model('Cat', blogSchema);

Amazon S3 setup for building API for image upload to S3 bucket from browser:

      Create a S3 bucket -->
                Set bucket name, choose nearest region, enabel bucket versioning and encryption.
      Create a IAM role -->
                IAM -> Create role ->  USe case: API Gateway(CloudWatchLogs) -> set Role name -> create
      Add PUT policy to s3 service for IAM role -->
                go to role -> attach new policy -> create policy -> choose service (s3) -> Action : putObject
                     -> Resources : Add ARN (of the aws s3 bucket to only allow that to specific bucket) 
                     -> Object name: Any (to allow to upload to any folder within the bucket) 
                          -> review -> give a name for policy -> create policy -> go to role and attach the policy
      Add GET policy -> Follow similiar steps and add s3 getObject (Bucket should be made public for anyone to view the images in browser)


      Create a new API -> 
                Choose REST API -> Create
                Create a resource: Action -> create a resource -> Resource path: /{bucket} (curly brace to reference path parameter)
                                    Under bucket create another resource {filename}. So end resource is /{bucket}/{filename}
                Create a PUT and GET method within the resources 
                     Choose method -> Choose integration(AWS service) -> Choose same region as s3 region -> AWS service - s3 -> HTTP method(put/get) -> Action type (Use path override) -> path override (give resource path {bucket}/{filename})
                     Execution role: Add IAM role ARN -> save
                     
                Integrate request -> Go to API method -> Integration request -> 
                     Configure URL path parameters:
                          name : bucket mapped from: method.request.path.bucket
                          name: filename mapped from: method.request.path.filename
                     
                Specify allowed binary media types(jpeg and png for images):
                     API settings -> image/jpeg, image/png, image/*(for allowing every file)
                
                Deploy API

                Use the invoke URL from API as endpoint for PUT and GET. Test the call in Postman/Thunderclient.
                     
           
                

ISSUES:

- Implementing a text-editor in upload blog page for blog description/content(bold, italic, font family, font   size). Tried using draft.js but did not work. 

- GET images without making s3 bucket public. 

- Applying AWS SDK credential authentication for admin login and upload.