https://github.com/zlhshn/blog_app

The blog application project is a multi-page web application and the frontend side was developed using React. The backend is written in Node.js. In the project, users can publish, like and edit blogs.
https://github.com/zlhshn/blog_app

axios formik-yup postman prime primereact react-router reactjs redux-persist reduxdevtools reduxtoolkit tailwind-css toastify

Last synced: about 1 month ago
JSON representation

The blog application project is a multi-page web application and the frontend side was developed using React. The backend is written in Node.js. In the project, users can publish, like and edit blogs.

• Host: GitHub
• URL: https://github.com/zlhshn/blog_app
• Owner: zlhshn
• Created: 2024-01-20T21:56:46.000Z (over 1 year ago)
• Default Branch: main
• Last Pushed: 2024-03-05T21:37:04.000Z (about 1 year ago)
• Last Synced: 2025-01-28T01:44:41.398Z (3 months ago)
• Topics: axios, formik-yup, postman, prime, primereact, react-router, reactjs, redux-persist, reduxdevtools, reduxtoolkit, tailwind-css, toastify
• Language: JavaScript
• Homepage: https://blog-app-zlhshn.vercel.app/
• Size: 41.9 MB
• Stars: 3
• Watchers: 2
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
## Project Description

I developed the frontend of a blog app project using ***Create React App (CRA)***. The backend is written in Node.js.

I implemented state management using ***Redux Toolkit.***

Additionally, for ***UI/UX*** design, I utilized ***Prime React*** and ***Tailwind CSS.***

## Project Link

[LİVE](https://blog-app-zlhshn.vercel.app/)

## How does my project look

![Blog_app](./blog.gif)

## Tech/framework used

***React.js*** : Created the project using the JavaScript framework React.React is a JavaScript library used for creating user interfaces. react-dom is used to render React applications in the browser. 


***Reduxjs/toolkit*** : Redux Toolkit is a library that enables faster and more efficient use of Redux. It simplifies global state management using Redux.  


***React-redux***: React Redux is a library that facilitates the integration of React and Redux. It is used for global state management in React 


***React-router-dom***: It is a library used for page navigation and route management in React applications


***Yup***:It is a schema-based validation library


***Formik***: It is used for form management.


***Axios***:It used for managing API requests and CRUD operations.


***Redux-persist***: Used to make the Redux store's state persistent. 


***Postman***:It is used to control API requestsand CRUD operations. 


***Redux DevTools***:It is used for the development and debugging of application based on Redux state management. 








## UI/UX Components 

***Prime React***: It is a React component library and used for UI components.


***Ouill***: It used for text editing features.


***React-toastify***:It has been used for users to track actions on the page.


***Headlessui/react***:Headless UI is a library that supports UI development.


***Heroicons/react***:Heroicons is an SVG icon library


***Tailwind CSS***:It is a CSS framework for web projects, designed to facilitate the rapid and efficient creation of customizable.


## Usage

📝 Users can view and read the blogs on the page without logging in.


📝 They can filter blogs by category. 


📝 Search based on the content of the blogs.


📝 If user want to write a blog, they should either register or log in.


📝 After completing the login process, they can write, edit, and delete blogs.


## API Reference

https://36150.fullstack.clarusway.com/

### How to install and run

`npm install` and `npm start`


Runs the app in the development mode.


Open [http://localhost:3000](http://localhost:3000) to view it in your browser.