Article Platform with Comments, Likes, and Dislikes

This project is a full-stack application that allows users to create, read, update, and delete articles, with additional features such as commenting, liking, and disliking. It has a responsive user interface and a robust backend.

---

Table of Contents

1. Features
2. Tech Stack
3. Setup Instructions
4. Directory Structure
5. API Documentation
6. Key Features
7. Contributing
8. License

---

Features

• User Authentication: Secure login and registration using JWT.
• Article Management: Users can create, edit, and delete articles.
• Commenting System: Add, edit, and delete comments on articles.
• Likes/Dislikes: Users can like/dislike articles and comments.
• Responsive Design: Optimized for all screen sizes.
• Error Handling: Robust backend error responses for better debugging.

---

Tech Stack

Frontend

• Framework: Next.js
• Styling: Tailwind CSS
• State Management: React Context API
• HTTP Client: Axios

Backend

• Framework: Node.js (Express)
• Database: PostgreSQL
• Authentication: JWT

---

Setup Instructions

Prerequisites

• Node.js (>=16.x)
• PostgreSQL (>=13.x)

Backend Setup

1. Navigate to the backend folder:

   cd ericnabofa-digs.devmole/backend

2. Install dependencies:

   npm install

3. Create a .env file and configure the environment variables:

   DATABASE_URL=your_postgres_database_url
   JWT_SECRET=your_jwt_secret
   PORT=5000
   

4. Start the backend server:

   npm start

Frontend Setup

1. Navigate to the frontend folder:

   cd ../frontend

2. Install dependencies:

   npm install

3. Configure the .env.local file:

   NEXT_PUBLIC_API_URL=http://localhost:5000/api
   

4. Start the frontend development server:

   npm run dev

---

Directory Structure

ericnabofa-digs.devmole/
├── README.md
├── backend/
│   ├── package-lock.json
│   ├── package.json
│   ├── server.js
│   ├── .env
│   ├── .gitignore
│   ├── config/
│   │   └── db.js
│   ├── controllers/
│   │   ├── articleController.js
│   │   ├── authController.js
│   │   ├── commentController.js
│   │   └── likeController.js
│   ├── middleware/
│   │   └── authMiddleware.js
│   ├── models/
│   │   ├── articleModel.js
│   │   ├── commentModel.js
│   │   ├── likeModel.js
│   │   └── userModel.js
│   └── routes/
│       ├── articleRoutes.js
│       ├── authRoutes.js
│       ├── commentRoutes.js
│       └── likeRoutes.js
└── frontend/
    ├── README.md
    ├── jsconfig.json
    ├── next.config.mjs
    ├── package-lock.json
    ├── package.json
    ├── postcss.config.js
    ├── postcss.config.mjs
    ├── tailwind.config.js
    ├── .gitignore
    ├── components/
    │   ├── Footer.jsx
    │   ├── Header.jsx
    │   ├── icons/
    │   │   ├── ArrowRightIcon.jsx
    │   │   ├── ClockIcon.jsx
    │   │   └── UserIcon.jsx
    │   └── ui/
    │       ├── Button.jsx
    │       ├── Card.jsx
    │       ├── CardContent.jsx
    │       ├── Input.jsx
    │       ├── Label.jsx
    │       ├── Select.jsx
    │       ├── Separator.jsx
    │       └── Textarea.jsx
    ├── contexts/
    │   └── AuthContext.js
    ├── pages/
    │   ├── _app.js
    │   ├── index.jsx
    │   ├── login.jsx
    │   ├── post-articles.jsx
    │   ├── register.jsx
    │   ├── articles/
    │   │   └── [id].jsx
    │   └── categories/
    │       └── [id].jsx
    ├── public/
    │   └── images/
    └── styles/
        └── global.css

---

API Documentation

Authentication Endpoints

Method	Endpoint	Description
POST	/api/auth/login	User login
POST	/api/auth/register	User registration

Article Endpoints

Method	Endpoint	Description
GET	/api/articles	Fetch all articles
GET	/api/articles/:id	Fetch a single article
POST	/api/articles	Create a new article
PUT	/api/articles/:id	Update an article
DELETE	/api/articles/:id	Delete an article

Comment Endpoints

Method	Endpoint	Description
GET	/api/comments/:articleId	Get comments for article
POST	/api/comments	Add a comment
PUT	/api/comments/:id	Edit a comment
DELETE	/api/comments/:id	Delete a comment

Like/Dislike Endpoints

Method	Endpoint	Description
POST	/api/likes/article/:id	Like/dislike an article
POST	/api/likes/comment/:id	Like/dislike a comment

---

Key Features

1. Role-based authentication: Manage access to specific features.
2. Optimistic UI updates: Faster user feedback on interactions.
3. Error handling: Friendly error messages for API issues.
4. Responsive Design: Optimized for mobile and desktop views.

---

Contributing

1. Fork the repository.
2. Create a feature branch:

   git checkout -b feature-name

3. Commit your changes:

   git commit -m "Add feature description"

4. Push your changes:

   git push origin feature-name

5. Create a pull request on GitHub.

---

📞 Contact

Oghenevwegba Eric Nabofa

• LinkedIn: linkedin.com/in/oghenevwegbaenabofa