Hi everyone! This is my first full stack web development project using the following -
- React with Typescript for the frontend
- Ruby on Rails API using PostgreSQL for the backend
- Render for deployment
You can find the deployed application here: ThreadTalk
(Note: The backend might take some time to load due to server inactivity)
(Edit: Due to the free version of the db and the deployment service, the website may not work as intended)
You can find the backend repository here: threadtalk backend
For more details, do read on!
Welcome to the repository for Thread Talk - a web forum project, a user-friendly, React with Rails-based application designed for engaging discussions. This platform allows for dynamic interaction through posts, comments, and user profiles, enhancing the online discussion experience.
- Landing Page: Landing Page to improve user experience, displaying application name, tagline and features
- User Authentication: Secure sign-in with Devise.
- CRUD Operations: Intuitive interfaces for creating, reading, updating, and deleting posts and comments.
- Nested Comments: For richer user interactions.
- User Profiles: Display name management and user-specific post viewing.
- Tags: Personalise and categorise posts with reusable tags. Further, search posts through tags.
- Favourites: Bookmark and follow favourite posts.
- Responsive Design: Mobile-friendly interface.
- Secure Tokens: JWT tokens for authentication.
- Custom Favicons
- Frontend: React with Typescript
- Backend: Ruby on Rails
- Database: PostgreSQL hosted on Supabase
- Authentication: Devise
- Deployment: Render
- Ruby
- Rails
- Node.js
- Fork this repository and the backend repository
- Clone the forked frontend repository to run it on your system
- Navigate to the frontend repository:
cd threadtalk - Install dependencies:
npm install - Navigate to backend repository:
cd react-web-forum - Initialise a new repository:
git init - Add remote repository:
git remote add origin <the url to the repo to clone forked repo> - Fetch main:
git fetch origin main - Checkout to main:
git checkout main - Install dependencies:
bundle install - Set the appropriate env variables (database name etc)
- Set up the database:
rails db:migrate - Start the server:
rails s - Navigate back to frontend repository:
cd .. - Run the react application:
npm start
For a detailed guide on how to use the Web Forum Project, refer to the User Manual section.
Throughout this project, the following resources were quite helpful in teaching me the fundamentals needed for this project -
- The Odin Project
- React Documentation
- Ruby on Rails Documentation
- Typescript Documentation
- ChatGPT for references such as how to get started with deployment. I also used it to get an idea of what are the resources available to me to start learning the necessary technologies. However, ChatGPT was only used for reference and not for the actual coding.
- Introduction
- Getting Started
- Account Management
- Navigating the Interface
- Features Guide
- Troubleshooting
- FAQs
Welcome to Thread Talk, a dynamic platform for engaging discussions. This manual guides you through using all the features this forum offers.
- A modern web browser (Chrome, Firefox, Safari)
- Internet connection
Visit ThreadTalk and bookmark the page for easy access.
- Click on “Sign Up”.
- Enter required details (username, email, password).
- Password must be atleast 6 characters long.
- Please remember your details, especially the email and the password, as you cannot retrieve it later.
- Click on “Log In” under the sign up page.
- Enter your email and password.
Explore the main navigation bar for accessing posts, your profile, and settings.
- Log in is required for creating a new post, commenting on posts, managing favourites, and creating profile.
- Log in is not required for viewing posts and comments, searching posts by tags, or viewing author profile.
- Click “Add new Post”.
- Enter your post title, content and tags.
- Add tags and click “Add Post”.
- Log in is required to create a post.
- Select a post.
- Scroll to the comment section.
- Type your comment and click “Add Comment”.
- You can even choose to reply to another user's comments by clicking on "Reply".
- You can also delete your comments anytime
- Log in is required to comment on posts.
- While creating a post, add tags for categorisation.
- Click on a tag in any post to view related discussions.
- Further, navigate to the Categories section and search by tags.
- Log in is not required to view posts based on tags
- Click the “Favourite” icon on a post to add it to your favourites.
- Access your favourites through the favourites section.
- Easily add/remove favourites
- Log in is required to view favourites
- Go to the My Profile Section after you have logged in.
- Add your own display name under which you can post.
- View your Posts
- Add bio to better express yourself!
- View your public profile
- Logout anytime
- Log in is required to manage your profile.
- Click on the author name under the post, whose author's profile you wish to view
- Log in is not required to view author profiles
- Navigate to the post you wish to edit
- Click on edit post to edit all contents including tags.
- Similarly, there will be an option to delete your post
- Log in is required for editing and deleting posts
If you encounter issues, try refreshing the page or logging out and back in. Clear your browser cache for persistent problems.
Q: Can I edit my posts? A: Yes, go to your post and select “Edit”.
Q: Can I view author profile? A: Yes, click on the Author's name under the post to view the author profile.