https://github.com/kisaa-fatima/mern-my-journal-application

Using MERN, I created an application which is "ScribleMe". It is a journal based application where you can upload your journal if you are a user else you have to log in.
https://github.com/kisaa-fatima/mern-my-journal-application

bycrypt context-api datefns expressjs jsonwebtoken mongodb multer nodejs react rich-text-editor

Last synced: 19 days ago
JSON representation

Using MERN, I created an application which is "ScribleMe". It is a journal based application where you can upload your journal if you are a user else you have to log in.

• Host: GitHub
• URL: https://github.com/kisaa-fatima/mern-my-journal-application
• Owner: Kisaa-Fatima
• Created: 2024-04-24T19:13:43.000Z (about 1 year ago)
• Default Branch: main
• Last Pushed: 2024-07-11T15:16:56.000Z (11 months ago)
• Last Synced: 2025-02-17T16:41:42.360Z (4 months ago)
• Topics: bycrypt, context-api, datefns, expressjs, jsonwebtoken, mongodb, multer, nodejs, react, rich-text-editor
• Language: JavaScript
• Homepage:
• Size: 7.93 MB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# ScribbleMe - My Journal Application

ScribbleMe is a journal-based application built using the MERN (MongoDB, Express, React, Node.js) stack. It allows users to register, log in, create, edit, and view journal posts. The application ensures user authentication and secure data handling.

## Table of Contents

- [Features](#features)

- [Technologies Used](#technologies-used)

- [Usage](#usage)

- [API Endpoints](#api-endpoints)

- [Database Models](#database-models)

- [Client Components](#client-components)

## Features

- User registration and authentication

- User login and logout

- Create, edit, and delete journal posts

- Upload and manage cover images for posts

- View individual posts

- User profile management

- Secure password handling with bcrypt

- JWT-based authentication

- Cross-origin resource sharing (CORS) support

## Technologies Used

- **Backend:**

  - Node.js

  - Express.js

  - MongoDB

  - Mongoose

  - bcrypt

  - jsonwebtoken

  - multer

- **Frontend:**

  - React.js

  - React Router

  - Context API

  - Rich text editor (React Quill)

  - date-fns

## API Endpoints

**User Routes**

-POST /register: Register a new user

-POST /login: Log in an existing user

-GET /profile: Get the profile of the logged-in user

-POST /logout: Log out the current user

**Post Routes**

-POST /post: Create a new post

-PUT /post: Update an existing post

-GET /post: Retrieve a list of posts (supports pagination and sorting)

-GET /post/:id: Retrieve a single post by its ID

## Database Models

**User Model (api/models/User.js)**

-username: A string representing the username of the user (required, unique, min length 4)

-password: A string representing the password of the user (required)

**Post Model (api/models/Post.js)**

-title: The title of the post (string, required)

-summary: A brief description of the post (string)

-content: The main content of the post (string, required)

-cover: The path or URL to the cover image of the post (string)

-author: A reference to the User model (Schema.Types.ObjectId)

-timestamps: Automatically adds createdAt and updatedAt fields

## Client Components

**App.js**

-Sets up routing and context provider for user authentication

-Defines routes for viewing and editing posts

**Header.js**

-Displays navigation links

-Shows links for creating a new post, logging in, registering, and logging out

-Displays the username of the logged-in user

**Post.js**

-Displays individual posts with title, summary, cover image, author, and creation date

**CreatePost.js**

-Form for creating a new post with title, summary, content, and file upload

**IndexPage.js**

-Fetches and displays a list of posts on the index page

**Login.js**

-Form for logging in a user

**UserContext.js**

-Manages user information and authentication state across the application