Welcome to the Micro Blogging Project! This web application, developed in multiple stages, aims to create a fully functional microblogging platform similar to Twitter. Each milestone progressively adds new features and enhances the functionality of the app.
- Milestone 1 - Mock Up
- Milestone 2 - Server Connection
- Milestone 3 - Profile Page & Routing
- Milestone 4 - Context & Auto Update
- Milestone 5 - Infinite Scrolling
- Milestone 6 - Authentication
- Milestone 7 - Your Tweets
- Milestone 8 - User's Profile Image
- Milestone 9 - Like Button Part 1
- Milestone 10 - Like Button Part 2
- Milestone 11 - Other Users' Profiles
- Milestone 13 - Search in Tweets (Optional)
- Milestone 14 - Comments for Tweets (Optional)
- Getting Started
- Contributing
- License
- Contact
Features:
- I implemented the main screen with two parts: "Create Tweet" and "Tweets List."
- The tweet creation is blocked if there are more than 140 characters, and the button is disabled.
- The tweets are saved locally, persisting even after refreshing the page.
- The tweet list is sorted in descending order, with the latest tweet appearing first.
- Each tweet includes a hardcoded username.
Features:
- I signed up on MockAPI and created a project and resource for tweets.
- Instead of storing data locally, I connected the app to the new API.
- I utilized GET and POST http methods to load tweets from the server and add new tweets.
- Loading indicator prevents adding new tweets while a request is in progress.
- I handled server errors and displayed messages to the user.
Features:
- I added a profile page that displays the current user's username.
- The profile page includes a form to change the username.
- New usernames are saved locally and sent to the server when creating a tweet.
- A navbar with "Home" and "Profile" links remains fixed regardless of the current page.
Features:
- I replaced local state and props with internal React context for managing tweet lists.
- Instead of refreshing the list from the server, new tweets are added to the local list.
- The navbar displays the number of published tweets.
- An interval fetches the most updated tweets list from the server to keep it up to date.
Features:
- I implemented infinite scrolling on the tweets page.
- Initially, 10 tweets are fetched, and loading the next 10 tweets occurs as the user scrolls down.
Features:
- I implemented user authentication by adding Login and Sign Up pages.
- Only logged-in users can view and send tweets.
- User credentials are stored in the mockAPI project's user resource.
- A logout button removes the user's ID from local storage.
- Profile page updates user information from the server.
Features:
- Usernames on tweets link to profiles, where users can view their own tweets.
- A toggleable element allows users to switch between viewing all tweets and only their tweets.
- The page's appearance changes based on the selected option.
Features:
- I added profile picture upload functionality using an online service like Cloudinary.
- Profile images are stored online and linked to user information on the server.
- Uploaded profile pictures are displayed on user profiles and tweets.
Features:
- I incorporated a like button for each tweet.
- Clicking the button toggles the "liked" status and displays accordingly.
- Users can "unlike" a tweet.
Features:
- I utilized the backend API to track liked tweets by users.
- A "Liked Tweets" button filters tweets by user likes.
- Users can switch between viewing liked tweets and all tweets.
Features:
- Usernames on tweets link to profiles of the tweet authors.
- Clicking a username takes users to a page displaying the profile of the user who wrote the tweet.
Features:
- I added a search bar to the navbar for signed-in users.
- The search bar allows users to search tweets and users.
- Search results are displayed by filtering the tweet list.
Features:
- I introduced a comments feature for tweets, inspired by social media platforms.
- Users can leave comments on tweets, enhancing engagement and interaction.
To set up and run the Micro Blogging Project locally, follow these steps:
- Clone this repository to your local machine.
- Navigate to the project directory and install dependencies using
npm install. - Start the development server with
npm start.
For any questions or inquiries, feel free to reach out to us at mironovisa@gmail.com