An open API service indexing awesome lists of open source software.

https://github.com/ma-ahmad/blog-app-react-frontend

React frontend of a blog app with rails on backend.
https://github.com/ma-ahmad/blog-app-react-frontend

chakra-ui react react-hook

Last synced: 11 months ago
JSON representation

React frontend of a blog app with rails on backend.

Awesome Lists containing this project

README

          

React Blog App

[![Linkedin](https://img.shields.io/badge/-LinkedIn-blue?style=flat&logo=Linkedin&logoColor=white)](https://www.linkedin.com/in/muhammad-ahmad20/)
[![Gmail](https://img.shields.io/badge/-Gmail-c14438?style=flat&logo=Gmail&logoColor=white)](mailto:muhammad.ahmad8043@gmail.com)


This app shows you how to create a CRUD app with ChakraUI, react on front-end and ROR on back-end

![Home Page](/public/home_page.png)

## What this App does?

- By this app, you will be able to:

- Create a new Blog.
- Edit a Blog.
- Delete a Blog.
- Get list of all Blogs.

## Built with

- Reactjs (react hooks, react router)
- ChakraUI used for styling
- Formik used for validations
- react-transition-group for animation

## Setup

* ### Back-end Part
- Clone the [rails backend repository](https://github.com/MA-Ahmad/blog-app-rails-backend)
- Use `cd `
- Run `bundle install`
- Run `rails db:create`
- Run `rails db:migrate`
- Run `rails db:seed`
- Run `rails s -p 3001`
* ### Front-end Part
- Clone this repository
- Use `cd `
- Run `npm install`
- Run `npm start`
Now check it on browser `localhost:300`

## Author

Muhammad Ahmad

- Github: [@Ahmad](https://github.com/MA-Ahmad)

- LinkedIn: [Muhammad Ahmad](https://www.linkedin.com/in/muhammad-ahmad20/)

## 🤝 Contributing

Contributions, issues and feature requests are welcome! Start by:

- Forking the project
- Cloning the project to your local machine
- `cd` into the project directory
- Run `git checkout -b your-branch-name`
- Make your contributions
- Push your branch up to your forked repository
- Open a Pull Request with a detailed description to the development branch of the original project for a review

## Show your support

Give a ⭐️ if you like this project!