https://github.com/hussein-m-kandil/odin-blog-viewer
A front-end app for viewing blog posts that I built as part of "The Odin Project - NodeJS" course.
https://github.com/hussein-m-kandil/odin-blog-viewer
Last synced: about 1 month ago
JSON representation
A front-end app for viewing blog posts that I built as part of "The Odin Project - NodeJS" course.
- Host: GitHub
- URL: https://github.com/hussein-m-kandil/odin-blog-viewer
- Owner: hussein-m-kandil
- Created: 2025-09-14T13:54:24.000Z (about 1 month ago)
- Default Branch: main
- Last Pushed: 2025-09-14T19:53:09.000Z (about 1 month ago)
- Last Synced: 2025-09-14T21:29:09.452Z (about 1 month ago)
- Language: TypeScript
- Size: 97.7 KB
- Stars: 0
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Odin Blog Viewer
A **blog viewing app** built as part of the required projects at [The Odin Project Node.js course](https://www.theodinproject.com/paths/full-stack-javascript/courses/nodejs).
**The course requirements for this project are divided into 3 pieces**:
1. **Backend API**, which I built as part of the [`generic-express-service`](https://github.com/hussein-m-kandil/generic-express-service).
2. **Blog Author Site**: which I built in [`odin-blog-author`](https://github.com/hussein-m-kandil/odin-blog-author).
3. **Blog Viewer Site**: which I built in this project for only viewing the blog posts and interacting with them.
**Here are the requirements from the course website**:
> We’re actually going to create the backend and two different front-ends for accessing and editing your blog posts. One of the front-end sites will be for people that want to read and comment on your posts, while the other one will be just for you to write, edit and publish your posts. Why are we setting it up like this? Because we can! The important exercise here is setting up the API and then accessing it from the outside.
---
## Tech Stack
- [TypeScript](https://www.typescriptlang.org/)
- [Zod](https://zod.dev/) for input validation
- [React](https://react.dev/) with its Context API
- [React Hook Form](https://react-hook-form.com/) for controlled form state
- [React Testing Library](https://testing-library.com/) for component testing
- [Next.js](https://nextjs.org/) with SSR and `fetch` for server HTTP requests
- [TanStack Query](https://tanstack.com/query/) for data fetching and caching
- [Motion (prev Framer Motion)](https://motion.dev/) for animations
- [axios](https://axios-http.com/) for browser HTTP requests
- [date-fns](https://date-fns.org/) for date formatting
- [shadcn/ui](https://ui.shadcn.com/) for UI primitives
- [Tailwind CSS](https://tailwindcss.com/) for styling
- [vitest](https://vitest.dev/) for running tests
---