Twitter Clone

Getting Started

Follow these steps to set up and run the Twitter Clone project:

1. Install Node.js: Make sure you have Node.js installed on your system. If not, download and install it from the official website.

2. Fork and Clone the Repository:

   • Clone your forked repository to your local machine using Git.

3. Install Dependencies:

   • Open a terminal and navigate to the cloned repository.
   • Install the API dependencies by running the command:

     npm run init-api
     

   • Install the UI dependencies by running the command:

     npm run init-ui
     

4. Run the API:

   • Start the API server by running:

     npm run start-api
     

   • Visit http://localhost:3000/api in your web browser to check if the API is up and running.
   • Visit http://localhost:3000/api/docs in your web browser to see the documentation of the API.

5. Run the UI:

   • Open a new terminal window (keep the API terminal running).
   • Start the UI development server with:

     npm run start-ui
     

   • Visit http://127.0.0.1:8080 in your web browser to see if the UI is working.

Functionalities

1. Register

Tip

Users can create new accounts.

2. Login

Tip

Users log in to existing ones to access the platform.

3. Follow and Unfollow

Tip

Users can follow other users to see their posts in their feed. They can also unfollow users to stop seeing their posts.

4. Create Post

Tip

Users can compose and share their thoughts, photos, videos, or links with their followers.

5. Show User Feed

Tip

Users can view a feed that displays posts from the users they follow, allowing them to stay updated with the latest content from their network.

6. Show Profile Feed

Tip

Users can access other users and their own profile feed, which displays all the posts they have shared on the platform.

7. Like and Unlike Post

Users can express their appreciation for a post by liking it. They can also undo their like by unliking the post.

8. News

Tip

Users can stay informed about current events and trending topics through a dedicated section that aggregates news and discussions from across the platform.

Discussion

1. 💬

Important

Where could the concepts discussed in class be seen in your website?

Note

Our social media project employs GitHub for version control, collaboration, and Visual Studio Code as our source code editor. We have categorized our codebase to separate JavaScript, HTML, and CSS style functions based on their respective roles in the front-end design.

JavaScript is the foundation of our project, serving as the backbone for the website's front-end functionality and as the language for structuring our custom API. This integration facilitates seamless communication between the user interface and the server, resulting in a dynamic and responsive user experience.

Moreover, we utilize the fetch API method to gather data from various sources, allowing us to dynamically populate news sections on the website. This approach ensures a constantly updated and engaging user experience, while also establishing scalable and efficient data management within our social media project.

2. 💬

Important

What was your inspiration for the design of the website?

Note

Our website design is a fusion of distinctive elements, drawing inspiration from three iconic brands - Discord, Twitter and Apple. We prioritize a clean and intuitive interface, inspired by Discord, to ensure an uncomplicated and user-friendly experience.

The neutral color background, similar to the classic Twitter layout, provides a calming backdrop, fostering readability and it is visually appealing. Additionally, we adopt Apple's approach to simplicity and concise features, focusing on essential functionalities without unnecessary complexities.

This blend of design inspirations reflects our commitment to creating a visually appealing, user-centric, and functionally efficient website for our users.

3. 💬

Important

What was your approach in creating the content of the website?

Note

Our approach to creating the content of the website began with a collaborative brainstorming session among team members. During this process, we discussed the goals, target audience, and key messaging of Telelet. We then translated these discussions into concrete design ideas by starting the mockup of our website in Figma. This iterative process allowed us to visualize and refine the content structure, ensuring that it aligns with our objectives and resonates with our audience.

4. 💬

Important

How is your website creative?

Note

Our website showcases creativity in several ways. Firstly, we carefully selected a color palette for Telelet that reflects the brand's identity and values, while also enhancing the user experience. Additionally, we thought outside the box when designing both the web and mobile layouts, incorporating unique elements and intuitive navigation features that set Telelet apart from other social media platforms. By combining innovative design choices with user-centric functionality, our website delivers a fresh and engaging experience for users.

5. 💬

Important

What did you use to deploy your website?

Note

We used Netlify to deploy our website to the web. Netlify not only supports static sites but also has robust support for Node.js applications. This flexibility allowed us to deploy our website seamlessly, whether it's a static site or a dynamic Node.js application.

https://telelet-net.netlify.app/

How you worked as a team to accomplish the project.

1. 💬

Important

How did you divide the tasks between the team, and what is the responsibility of each one?

Note

Firstly, we assigned team members to create distinct pages, each with its media queries, such as the profile, feed, discover, user login, and register pages. Zhen together with Louise was assigned to the profile page, and Vince was assigned to user login and register. Lastly, Wince and Georgette were assigned to the feed and discover page. This approach allowed us to focus on individual page layouts, ensuring a seamless and responsive design across various devices.

Once the layout phase was complete, we collaborated to shift gears to backend development. We allocated responsibilities for implementing the necessary functions on each page, turning our design into a fully operational and user-friendly website. We divided the tasks to make the most of each team member's strengths and expertise. This helped us create a development process that was efficient and well-rounded.

2. 💬

Important

How did you prevent your changes in code from conflicting with each other?

Note

Our team has implemented a systematic solution to prevent conflicts and ensure a smooth collaborative coding process. Georgette and Wince are responsible for handling the push and commit changes on GitHub. The rest of the team submits their completed code to Georgette and Wince, who meticulously reviews each submission for any structural inconsistencies or conflicts.

This thorough examination allows them to address potential issues before merging the code into the main repository. Once satisfied with the submitted code, Georgette and Wince initiate the commit and push, seamlessly integrating the contributions from the entire team. This collaborative approach streamlines the development process and ensures the stability and coherence of our codebase.

How you could improve your website in the future

Note

• Adding additional features such as Retweeting, Post Sharing, etc.
• Functional Trending Section
• Chat Messaging Feature
• Ability to Delete, Edit Posts
• Ability to customize and edit user bio, usernames, and even profile pictures
• Better code flow and efficiency

Other thoughts that might be noteworthy

Note

Working with this group to create a social media platform has been a milestone for us as a CS student. We split up tasks, like designing pages and adding features. The best part is how we all contribute to the creative side, choosing the brand name, logo, and colors. This project is like a puzzle, and every individual contributes their piece and showcases skills and ideas. Even when things get tricky, it feels great when we figure it out together. This project has shown us that teamwork is super important, and it's awesome to see our ideas come to life in our social media creation.