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
- Complete user authentication with protected routes
- Curated recommendations on homepage
- Infinite scrolling layout
- Responsive and modern UI
Prerequisites
- Node.js
- npm or yarn
- React
- Tailwind CSS
- React Hook Form / Yup
Getting Started
- Clone the repository to your local machine.
- Navigate to the frontend directory of the project.
- Install the required dependencies:
npm install
or
yarn install
- Start the development server:
npm run dev
or
yarn dev
- 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:
- Fork the repository
- Create your feature branch (
git checkout -b feature/AmazingFeature)
- Commit your changes (
git commit -m 'Add some AmazingFeature')
- Push to the branch (
git push origin feature/AmazingFeature)
- 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
- Form validation:
- Simple authentication:
- Route protection:
- Dark mode:
- 404 Page:
- React-quill:
- Pagination:
- React headers: