This repository contains the frontend code for IronHub, a single-page application (SPA) built with React.js. It serves as the user interface for the platform, allowing Ironhack students to post in the forum, reply to others' posts, and manage their own. IronHub connects Ironhackers, enabling them to share and collaborate. Sign up or log in to start exploring today!
Link to the Back-end repository:
https://github.com/phsworks/IronHub-Backend/blob/main/readme.md
- User Authentication: Sign-up, log-in, and log-out.
- Post Management: View, create, edit, and delete posts.
- Replies Management: View, create, edit, and delete replies.
- Filtering and Sorting: Easily browse posts by course, date, or title.
- User Profiles: Update personal details in your profile page.
- React.js: Frontend library for building user interfaces.
- React Router: For navigation between views.
- CSS: Custom styling for the app.
- Axios: For handling API requests to communicate with the backend.
- Cloudinary: For managing and hosting media files, such as images.
Click to view Pages and Routes
-
Homepage
- Path:
/ - Description: Displays a brief introduction to IronHub. Includes navigation to the "About" page and buttons for login/sign-up actions.
- Path:
-
About
- Path:
/about - Description: Contains information about the platform and its creators. Provides links to sign-up and log-in pages.
- Path:
-
Sign-Up
- Path:
/auth/signup - Description: A public page with a form to create an account.
- Path:
-
Log-In
- Path:
/auth/login - Description: A public page where users can log in to the platform.
- Path:
-
Posts
- Path:
/posts/ - Description: Displays all posts with options to filter, sort, and search. Utilizes the PostCard component for each post.
- Path:
-
Create Post
- Path:
/newpost - Description: A private page where users can create a new post.
- Path:
-
Post Details
- Path:
/posts/:_id - Description: Displays the full details of a single post, including options for the owner to edit or delete the post. Below, the user can see replies to the post and can reply to them as well. The owners of the replies can edit them too.
- Path:
-
Profile
- Path:
/:userId - Description: Shows the user's profile information and allows updates.
- Path:
-
Error Page
- Path:
* - Description: Displays an error page for any undefined routes.
- Path:
Click to view the components
- AboutCard: Displays info about the creators.
- Footer: The bottom section of the app.
- Forms: Handles login, signup, and post and reply creation and edition forms.
- IsPrivate: Ensures access to certain pages for authenticated users.
- IsPublic: Ensures access to certain pages for unauthenticated users.
- Navbar: Navigation bar with links to various sections.
- Popups: Modal dialogs for messages or confirmations.
- PostCard: Displays a post summary.
- ProfileCard: Shows user profile information.
- ReplyCard: Displays a post reply.
- Searchbar: Allows searching posts by title.
These components are reusable and help maintain a modular structure.
Click to view Frontend Installation Instructions
Installation:
- Clone the Frontend Repository:
- git clone https://github.com/didonatodani/ironhub-front.git
- cd ironhub-front
Install dependencies:
- Required Dependencies: - react - Frontend library for building user interfaces. - react-router-dom - For handling navigation between pages. - axios - To make HTTP requests to the backend. - cloudinary - For image storage and retrieval
npm install react react-router-dom axios cloudinary
Run the development server: - npm run dev
- IronHub was developed by:
- Dani Di Donato:
- Github-link: https://github.com/didonatodani/
- Linkedin-link: https://www.linkedin.com/in/dani-di-donato-web-dev/
- Nigel Ferreres
- Github-link: https://github.com/NigelFerrefe
- Linkedin-link: https://www.linkedin.com/in/nigel-ferreres-felix
- Piet-Hein Schouten
- Github-link: https://github.com/phsworks
- Linkedin-link: https://www.linkedin.com/in/piet-hein-schouten-4a2b451bb/
- Dani Di Donato: