Skip to content

Latest commit

 

History

History
312 lines (235 loc) · 11.2 KB

README.md

File metadata and controls

312 lines (235 loc) · 11.2 KB
Raw

Contributors Forks Stargazers Issues MIT License LinkedIn

Mini Project 3 Blog App

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
  1. About The Project
  2. Getting Started
  3. Usage
  4. Roadmap
  5. Contributing
  6. Contact
  7. Acknowledgments

About The Project

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.

Features

  • 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).

Product Name Screen Shot

(back to top)

Built With

Frontend:

  • React
  • React Router
  • MUI
  • Axios

Backend:

  • Node.js

  • Express.js

  • Sequelize

  • MySQL

Deployment Platforms: Frontend:

  • Netlify

Backend:

  • Render

(back to top)

Getting Started

To get a local copy up and running follow these simple example steps.

Prerequisites

Node.js and npm installed on your machine. MySQL database setup. Git installed on your machine. Docker Desktop

Installation

  1. Clone the repo 
    git clone https://github.com/nelg62/MiniProject3.git

Container Setup

  1. Navigate to backend folder

    cd Backend

  2. Open Docker

  3. Create Docker container in terminal

    docker-compose -f .\compose.mysql.yml up

Backend Setup

  1. navigate to backend folder

    cd Backend

  2. Install NPM packages

    npm install

  3. Run Backend

    npm start

Frountend Setup

  1. navigate to frountend folder 
    cd Frontend
cd MiniProject3FrontEnd
  2. Install NPM packages 
    npm install
  3. Run frountend 
    npm run dev
  4. connect to frount end 
    http://localhost:5173/

(back to top)

Usage

Coming Soon...

(back to top)

Roadmap

  • 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).

(back to top)

Contributing

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!

  1. Fork the Project
  2. Create your Feature Branch (git checkout -b feature/AmazingFeature)
  3. Commit your Changes (git commit -m 'Add some AmazingFeature')
  4. Push to the Branch (git push origin feature/AmazingFeature)
  5. Open a Pull Request

(back to top)

Top contributors:

contrib.rocks image

(back to top)

Contact

Glen Harding - glen.harding.nz@gmail.com

Project Link: https://github.com/nelg62/MiniProject3

(back to top)

Acknowledgments

(back to top)