https://github.com/antonharbers/blog-frontend-demo
Blog Frontend Demo - The Odin Project: https://www.theodinproject.com/lessons/nodejs-blog-api
https://github.com/antonharbers/blog-frontend-demo
api blog css frontend javascript react theodinproject
Last synced: about 2 months ago
JSON representation
Blog Frontend Demo - The Odin Project: https://www.theodinproject.com/lessons/nodejs-blog-api
- Host: GitHub
- URL: https://github.com/antonharbers/blog-frontend-demo
- Owner: AntonHarbers
- Created: 2024-01-22T18:11:37.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2024-02-06T17:21:21.000Z (over 1 year ago)
- Last Synced: 2025-03-13T01:16:04.776Z (7 months ago)
- Topics: api, blog, css, frontend, javascript, react, theodinproject
- Language: JavaScript
- Homepage: https://famous-dolphin-e32fb4.netlify.app/
- Size: 46.9 KB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Blog Frontend App Demo - The Odin Project
Welcome to my Blog Author Page Demo project, a front-end showcase designed to complement the Blog API project I previously developed. This project is built with React, integrating seamlessly with the Blog API to create a dynamic, user-friendly blog authoring and reading experience.
[Live Link](https://famous-dolphin-e32fb4.netlify.app/)
[Author Page Repo](https://github.com/AntonHarbers/blog-author-page-demo)
[Author Page](https://blog-author-page-demo-osga3btfh-tmonee23.vercel.app/)
[Rest-API Repo](https://github.com/AntonHarbers/Blog-Api-Demo)
[Rest-API Enpoint](https://cerulean-diagnostic-watercress.glitch.me/)
## Project Overview
The Blog Author Page Demo is a React application that serves as the front-end for the Blog API, allowing authors to manage their posts and readers to enjoy content in a clean, engaging interface. This project demonstrates my capabilities in front-end development, particularly in React, and my understanding of integrating front-end applications with RESTful APIs.
### Key Features
- **User Authentication**: Utilize the Blog API's JWT authentication for secure login and session management.
- **Dynamic Post Rendering**: Fetch and display blog posts in real-time, with support for markdown rendering.
- **Interactive Author Dashboard**: Enable authors to create, update, and delete their posts through a user-friendly interface.
- **Responsive Design**: Ensure a seamless reading experience across various devices and screen sizes.
### Technical Highlights
- **React Hooks**: Leverage React's modern features for state management and component lifecycle handling.
- **Inbuilt fetch API for API Communication**: Utilize Fetch for efficient, promise-based HTTP requests to the Blog API.
- **TailwindCSS**: Adopt Tailwind-CSS for component-scoped styles and easier theme management.
## Getting Started
To get a local copy up and running, follow these simple steps:
1. Clone the repository:
```cmd
git clone https://github.com/AntonHarbers/blog-author-page-demo.git
```
2. Install NPM packages:
```cmd
npm install
```
3. Configure the environment variables to connect to your instance of the Blog API.
4. Start the development server:
```cmd
npm start
```
## API Integration
This project is designed to work seamlessly with the [Blog API](https://github.com/AntonHarbers/Blog-Api-Demo). It consumes the following endpoints for its operations:
- Authentication (Login/Logout)
- CRUD operations for blog posts
- Fetching posts for display
Make sure the Blog API is running and accessible for the full functionality of this demo.
## Lessons Learned
Through the development of this Blog Author Page Demo, I've deepened my understanding of:
- **React Development**: Building complex, interactive UIs with React.
- **API Integration**: Connecting front-end applications with back-end services securely and efficiently.
- **Front-End Security**: Implementing client-side authentication and authorization.
## Future Enhancements
- **Comment System**: Integrate a commenting feature for posts.
- **User Profiles**: Allow users to create and edit their profiles.
- **Advanced Text Editor**: Incorporate a rich text editor for post creation and editing.
This project is a testament to my growth as a full-stack developer, showcasing my ability to create both the back-end infrastructure and the front-end presentation of web applications. I look forward to incorporating more features and improvements as I continue to learn and take on more challenging projects.