https://github.com/rashmi028/froker-website

https://github.com/rashmi028/froker-website

mongodb mongoose nodejs reactjs responsive-design

Last synced: 17 days ago
JSON representation

• Host: GitHub
• URL: https://github.com/rashmi028/froker-website
• Owner: Rashmi028
• Created: 2024-07-19T17:04:14.000Z (6 months ago)
• Default Branch: main
• Last Pushed: 2024-07-24T19:36:48.000Z (6 months ago)
• Last Synced: 2024-08-24T02:24:25.796Z (5 months ago)
• Topics: mongodb, mongoose, nodejs, reactjs, responsive-design
• Language: JavaScript
• Homepage: https://froker-website.vercel.app
• Size: 23.7 MB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# Froker Website

A full-stack blog website where users can view blog posts, read detailed content, and like posts. Built with React for the frontend, Express for the backend, and MongoDB for data storage.

## Features

- **View Blog List:** See a list of blog posts on the homepage.

- **Read Blog Details:** Access detailed content of each blog post.

- **Like Blog Posts:** Users can like posts, with one like allowed per user.

## Technologies Used

- **Frontend:** React.js

- **Backend:** Node.js with Express

- **Database:** MongoDB

- **Styling:** CSS

## Project Structure

```bash

Froker-website/

│

├── Client/ # React client application

│ ├── public/

│ ├── src/

│ │ ├── components/ # React components

│ │ ├── styles/ # CSS files

│ │ └── App.js # Main React component

│ ├── package.json # Client dependencies and scripts

│ └── ...

│

├── Server/ # Express server application

│ ├── models/ # Mongoose schemas/models

│ ├── routes/ # API routes

│ ├── index.js # Main server entry point

│ ├── package.json # Server dependencies and scripts

│ └── ...

│

├── .gitignore # Git ignore file

└── README.md # This README file

```

## Screenshots

### Homepage

*The main page displaying a list of blog posts.*

| ![Homepage](Client/src/assets/home1.png)  | ![Homepage](Client/src/assets/home3.png) |

|-------------------------------------------|-------------------------------------------|

| Image 1                                   | Image 2                                   |

| ![Homepage](Client/src/assets/home3.png) | ![Homepage](Client/src/assets/home4.png) |

|-------------------------------------------|-------------------------------------------|

| Image 3                                   | Image 4                                   |

### Blog Post Detail

*Detailed view of a single blog post including the title, thumbnail, and content.*

| ![Blog Post Detail](Client/src/assets/blog1.png) | ![HBlog Post Detail](Client/src/assets/blog2.png) |

|--------------------------------------------------|---------------------------------------------------|

| Image 1                                          | Image 2                                           |

### Like Feature

![Like Feature](assets/screenshots/screenshot-like-feature.png)

*The like button functionality in action.*

## Setup Instructions

### Prerequisites

- Node.js and npm installed

- MongoDB running on your local machine or a remote instance

### 1. Clone the Repository

```bash

git clone https://github.com/your-username/your-repo-name.git

cd your-repo-name

```

#### Navigate into the project directory:

```bash

cd your-repo-name

```

### 2. Install Dependencies

#### Backend

1.Navigate to the server directory:

```bash

cd Server

```

2.Install backend dependencies:

```bash

npm install

```

3.Create a .env file in the Server directory with your MongoDB connection string. Example:

```env

MONGO_URI=mongodb://localhost:27017/Blog

```

4.Start the backend server:

```bash

node index.js

```

#### Frontend

1.Open a new terminal window or tab and navigate to the client directory:

```bash

cd Client

```

2.Install frontend dependencies:

```bash

npm install

```

3.Start the frontend development server:

```bash

npm run dev

```

## 3. Access the Application

Once both the backend and frontend servers are running, you can access the application by visiting http://localhost:3000 in your web browser.

## 4. API Endpoints

Here are some of the key API endpoints for the application:

Get all blogs: GET /api/blogs

Get a blog by ID: GET /api/blogs/:id

Like a blog: POST /api/blogs/:id/like


## 6. Troubleshooting

If you encounter issues, ensure that:

MongoDB is running.

Both backend and frontend servers are correctly configured and running.

All environment variables are set correctly.

For further assistance, please refer to the documentation or open an issue on the GitHub repository.