- About
- Live Demo
- How to Install and Run
- Features
- Tech Stack
- API Documentation
- Future Features
- Feedback and Contributions
- Credits
- Contact
To be noted!
- I am yet to complete this project and have things in the Issues to action so please bear that in mind!
- You are welcome to check out the Future Features section to see what I have planned.
What is Fruitful Discussions?
- Fruitful Discussions is a project I completed during the Northcoders bootcamp. It is a social news aggregation, web content rating and discussion website. Fruitful Discussions has articles which are divided into topics, and each article has user-curated ratings from upvotes and downvotes using the API. Users can also add comments about an article. It uses the seeded databases and API which was built in Fruitful Discussions BE.
Key functionalities include:
- Article Browse: Users can view articles divided into various topics.
- User-Curated Ratings: Articles feature upvote and downvote functionality, leveraging the back-end API.
- Commenting System: Users can add comments to articles and delete their own comments.
Fruitful Discussions uses data from the Fruitful Discussions BE API, which handles built the API, and handles any requests to it.
Experience the hosted version of Fruitful Discussions Front-End here (via Netlify):
You can also find the corresponding back-end repository here:
Follow these steps to get a local copy of Fruitful Discussions Front-End up and running on your machine.
1 - Prerequisites
Ensure you have the following software installed:
- Node.js:
v22.14.0- You can verify your Node.js version by running:
node -v
- You can verify your Node.js version by running:
- npm: (Comes with Node.js)
- You can verify your npm version by running:
npm -v
- You can verify your npm version by running:
2 - Clone the Repository
First, fork this repository to your GitHub account, then clone your forked repository to your local machine:
git clone [https://github.com/loafdimension/fruitful-discussions-FE.git](https://github.com/loafdimension/fruitful-discussions-FE.git)
3 - Navigate to the Project Directory
cd fruitful-discussions-FE
cd fruitful-discussions
4 - Install Dependencies
Install the dependencies inside the package json file
npm install
3 - Start the Development Server
To run the application in development mode, run the following:
npm run dev
When this opens the VITE message, open the local host link.
- View All Articles: Browse a list of all available articles.
- Article Filtering by Topic: Filter articles by specific topics (e.g., coding, football, cooking).
- Individual Article View: Access a dedicated page for each article to see full content and comments.
- View Comments: Read comments associated with each article.
- Vote on Articles: Upvote or downvote articles.
- Post Comments: Add new comments to an article.
- Delete Own Comments: Remove comments you have posted.
- Front-end: Framework: React.js
- Styling: Vanilla CSS
- State Management: Reacts built in hooks (Use State)
- Routing: React Router DOM
- HTTP Client: Axios
- Build Tool: Vite
- Deployment: Netlify
This front-end application interacts with the Fruitful Discussions Back-End API. You can find the full API documentation, including available endpoints and data structures, in its dedicated repository:
As noted, this project is still under development, and I have plans for further enhancements. Here are some features I intend to implement:
- Accessability (alt text, semantic HTML etc)
- Enhanced Error Handling
- Options to sort articles
- View a separate page for each topic with a list of related articles
- Improve User Experience (loading states, intuitive navigation etc)
- Improved Styling (flex, grid, contrast checking, tailwind etc)
- User Authentication
- User Profiles
- Pagination / Infinite Scrolling
- Testing
You can track current and planned tasks, as well as contribute ideas, via the project's issues page.
As a contributor
- Be kind, and please do offer feedback and suggestions for improvement.
- Discussions
- Fruitful Discussions is a work in progress and I will be refactoring based on any provided feedback, as well as adding new features which are listed on the issues page.
- Open an issue / View current issues
Who worked on this project and how was it created?
- I created and worked on this project alone, but using Northcoders resources and with support from all of their wonderful staff.
- This portfolio project was created as part of a Digital Skills Bootcamp in Software Engineering provided by Northcoders
- If you have any questions or feedback, and would like to contact me, please feel free to reach out via LinkedIn or GitHub Discussions.
- Discussions