This is the third project I created as a group assignment as part of my course at the Institute of Data (IOD). After gaining a strong foundation in databases, we were tasked with working collaboratively to build an application of our choosing that integrates our knowledge of frontend, backend, and databases. We explored both MongoDB and MySQL and ultimately decided to use MySQL for this project.
This project is a Blog application built using React and Material-UI (MUI) for the frontend, and Express.js for the backend. The application allows users to create, view, update, and delete blog posts, as well as add and delete comments on posts. Users can also like and unlike posts to engage with the content. This app demonstrates a full CRUD (Create, Read, Update, Delete) functionality for posts and comments, with a responsive design currently implemented using MUI, and future plans to migrate to Tailwind CSS for enhanced styling and customization.
Explore the docs »
View Demo
·
Report Bug
·
Request Feature
Table of Contents
This project showcases a full CRUD (Create, Read, Update, Delete) application for blog posts and comments. Users can manage blog posts, including creating, editing, and deleting them. Additionally, users can like or unlike posts to engage with the content. Users can also add comments to posts and delete them when needed. The frontend is currently styled using MUI components for a clean and responsive design, and the backend is developed using Node.js with Express.js and Sequelize to interact with a MySQL database hosted on Render. The frontend is hosted on Netlify.
- Full CRUD functionality for blog posts and comments.
- Ability to like and unlike posts.
- Commenting system: add and delete comments on blog posts.
- Custom theming using the Context API.
- Responsive design with Material-UI (future migration to Tailwind CSS).
Frontend:
Backend:
Deployment Platforms: Frontend:
Backend:
To get a local copy up and running follow these simple example steps.
Node.js and npm installed on your machine. MySQL database setup. Git installed on your machine. Docker Desktop
- Clone the repo
git clone https://github.com/nelg62/MiniProject3.git
Container Setup
-
Navigate to backend folder
cd Backend -
Open Docker
-
Create Docker container in terminal
docker-compose -f .\compose.mysql.yml up
Backend Setup
-
navigate to backend folder
cd Backend -
Install NPM packages
npm install
-
Run Backend
npm start
Frountend Setup
- navigate to frountend folder
cd Frontend cd MiniProject3FrontEnd
- Install NPM packages
npm install
- Run frountend
npm run dev
- connect to frount end
http://localhost:5173/
Coming Soon...
- Add froundend to cloud (Netlify)
- Add Backend to cloud (Render)
- update ui and make with tailwidn to make more responsive
- add login feature
- fix liking comments
- add images
- real time chat app
- support app feature
See the open issues for a full list of proposed features (and known issues).
Contributions are what make the open source community such an amazing place to learn, inspire, and create. Any contributions you make are greatly appreciated.
If you have a suggestion that would make this better, please fork the repo and create a pull request. You can also simply open an issue with the tag "enhancement". Don't forget to give the project a star! Thanks again!
- Fork the Project
- Create your Feature Branch (
git checkout -b feature/AmazingFeature) - Commit your Changes (
git commit -m 'Add some AmazingFeature') - Push to the Branch (
git push origin feature/AmazingFeature) - Open a Pull Request
Glen Harding - glen.harding.nz@gmail.com
Project Link: https://github.com/nelg62/MiniProject3