{"id":19454651,"url":"https://github.com/mlsakiit/devblogs-frontend","last_synced_at":"2025-04-25T05:30:36.850Z","repository":{"id":257870174,"uuid":"869101673","full_name":"MLSAKIIT/devblogs-frontend","owner":"MLSAKIIT","description":"DevBlogs : A blogging website made for developers by developers. This repository contains the frontend for the project","archived":false,"fork":false,"pushed_at":"2024-10-19T09:53:49.000Z","size":838,"stargazers_count":10,"open_issues_count":19,"forks_count":22,"subscribers_count":1,"default_branch":"main","last_synced_at":"2024-10-19T10:44:29.072Z","etag":null,"topics":["beginner-friendly","front-end-development","frontend","full-stack","hacktoberfest","hacktoberfest2024","reactjs","tailwindcss","vite","web"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/MLSAKIIT.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2024-10-07T18:08:28.000Z","updated_at":"2024-10-19T09:53:53.000Z","dependencies_parsed_at":"2024-10-19T09:54:47.974Z","dependency_job_id":null,"html_url":"https://github.com/MLSAKIIT/devblogs-frontend","commit_stats":null,"previous_names":["mlsakiit/devblogs-frontend"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/MLSAKIIT%2Fdevblogs-frontend","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/MLSAKIIT%2Fdevblogs-frontend/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/MLSAKIIT%2Fdevblogs-frontend/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/MLSAKIIT%2Fdevblogs-frontend/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/MLSAKIIT","download_url":"https://codeload.github.com/MLSAKIIT/devblogs-frontend/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":250760560,"owners_count":21482827,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["beginner-friendly","front-end-development","frontend","full-stack","hacktoberfest","hacktoberfest2024","reactjs","tailwindcss","vite","web"],"created_at":"2024-11-10T17:11:25.229Z","updated_at":"2025-04-25T05:30:36.450Z","avatar_url":"https://github.com/MLSAKIIT.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# DevBlogs Frontend\n\n## Overview\n\nThis is the frontend for DevBlogs, a Full Stack Blogging site for Developers by Developers. It's part of the MLSA HACKTOBER 2024: WEBDEV project.\n\n## Tech Stack\n\n- React for dynamic user interfaces\n- Tailwind CSS for styling\n- Vite as the build tool\n\n## Features\n\n1. Complete user authentication with protected routes\n2. Curated recommendations on homepage\n3. Infinite scrolling layout\n4. Responsive and modern UI\n\n## Prerequisites\n\n- Node.js\n- npm or yarn\n- React\n- Tailwind CSS\n- React Hook Form / Yup\n\n## Getting Started\n\n1. Clone the repository to your local machine.\n2. Navigate to the frontend directory of the project.\n3. Install the required dependencies:\n   ```\n   npm install\n   ```\n   or\n   ```\n   yarn install\n   ```\n4. Start the development server:\n   ```\n   npm run dev\n   ```\n   or\n   ```\n   yarn dev\n   ```\n5. The frontend should now be running on a local port, typically http://localhost:5173.\n\n## Folder Structure\n\n```\n.\n├── README.md\n├── eslint.config.js\n├── index.html\n├── package.json\n├── postcss.config.js\n├── public/\n│   ├── assets/\n│   └── vite.svg\n├── src/\n│   ├── App.jsx\n│   ├── components/\n│   ├── index.css\n│   ├── main.jsx\n│   └── pages/\n├── tailwind.config.js\n└── vite.config.js\n```\n\n## Contributing\n\nWe welcome contributions to improve this project! Here's how you can contribute:\n\n1. Fork the repository\n2. Create your feature branch (`git checkout -b feature/AmazingFeature`)\n3. Commit your changes (`git commit -m 'Add some AmazingFeature'`)\n4. Push to the branch (`git push origin feature/AmazingFeature`)\n5. Open a Pull Request\n\n## Issues \u0026 Features\n- Create and validate login and registration forms using `react-hook-form` and `yup`.\n- Fetch blogs and implement pagination.\n- Dark mode toggle with Tailwind CSS.\n- Rich text editor integration using `react-quill`.\n- Route protection for authenticated routes.\n  \nCheck the main project documentation for a list of current issues and tasks for the frontend.\n\n## References\n\n- Form validation: \n  - https://dev.to/franciscomendes10866/react-form-validation-with-react-hook-form-and-yup-4a98\n  - https://www.youtube.com/watch?v=wlltgs5jmZw\n- Simple authentication:\n  - https://dev.to/sanjayttg/jwt-authentication-in-react-with-react-router-1d03\n  - https://www.tutorialspoint.com/localstorage-in-reactjs\n- Route protection:\n  - https://medium.com/@dennisivy/creating-protected-routes-with-react-router-v6-2c4bbaf7bc1c\n  - https://www.youtube.com/watch?v=pyfwQUc5Ssk\n- Dark mode:\n  - https://mujeebkhan1831.medium.com/how-to-implement-darkmode-in-react-using-tailwind-css-3c47d009209a\n  - https://www.youtube.com/watch?v=06IpGhvEtYg\n- 404 Page:\n  - https://www.geeksforgeeks.org/how-to-setup-404-page-in-react-routing/\n- React-quill:\n  - https://www.npmjs.com/package/react-quill\n  - https://www.youtube.com/watch?v=ahNdQaq0mHg\n  - https://www.youtube.com/watch?v=I3JQNq7Cbt0\n- Pagination:\n  - https://www.youtube.com/watch?v=koG_UErY24I\n- React headers:\n  - https://jasonwatmore.com/react-fetch-add-bearer-token-authorization-header-to-http-request\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmlsakiit%2Fdevblogs-frontend","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmlsakiit%2Fdevblogs-frontend","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmlsakiit%2Fdevblogs-frontend/lists"}