Skip to content

DevBlogs : A blogging website made for developers by developers. This repository contains the frontend for the project

License

Notifications You must be signed in to change notification settings

MLSAKIIT/devblogs-frontend

Repository files navigation

DevBlogs Frontend

Overview

This is the frontend for DevBlogs, a Full Stack Blogging site for Developers by Developers. It's part of the MLSA HACKTOBER 2024: WEBDEV project.

Tech Stack

  • React for dynamic user interfaces
  • Tailwind CSS for styling
  • Vite as the build tool

Features

  1. Complete user authentication with protected routes
  2. Curated recommendations on homepage
  3. Infinite scrolling layout
  4. Responsive and modern UI

Prerequisites

  • Node.js
  • npm or yarn
  • React
  • Tailwind CSS
  • React Hook Form / Yup

Getting Started

  1. Clone the repository to your local machine.
  2. Navigate to the frontend directory of the project.
  3. Install the required dependencies:
    npm install
    
    or
    yarn install
    
  4. Start the development server:
    npm run dev
    
    or
    yarn dev
    
  5. The frontend should now be running on a local port, typically http://localhost:5173.

Folder Structure

.
├── README.md
├── eslint.config.js
├── index.html
├── package.json
├── postcss.config.js
├── public/
│   ├── assets/
│   └── vite.svg
├── src/
│   ├── App.jsx
│   ├── components/
│   ├── index.css
│   ├── main.jsx
│   └── pages/
├── tailwind.config.js
└── vite.config.js

Contributing

We welcome contributions to improve this project! Here's how you can contribute:

  1. Fork the repository
  2. Create your feature branch (git checkout -b feature/AmazingFeature)
  3. Commit your changes (git commit -m 'Add some AmazingFeature')
  4. Push to the branch (git push origin feature/AmazingFeature)
  5. Open a Pull Request

Issues & Features

  • Create and validate login and registration forms using react-hook-form and yup.
  • Fetch blogs and implement pagination.
  • Dark mode toggle with Tailwind CSS.
  • Rich text editor integration using react-quill.
  • Route protection for authenticated routes.

Check the main project documentation for a list of current issues and tasks for the frontend.

References