Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/yashi-singh-1/fcc-forum-leaderboard

Built a dynamic leaderboard displaying the latest topics from the freeCodeCamp forum. This project uses asynchronous JavaScript to fetch and display data, including topic titles, user avatars, and activity metrics.
https://github.com/yashi-singh-1/fcc-forum-leaderboard

api async async-fetch async-programming asynchronous-programming dom dom-manipulation fetch freecodecamp freecodecamp-challenge freecodecamp-frontend freecodecamp-project frontend javascript js web-developement

Last synced: 30 days ago
JSON representation

Built a dynamic leaderboard displaying the latest topics from the freeCodeCamp forum. This project uses asynchronous JavaScript to fetch and display data, including topic titles, user avatars, and activity metrics.

Awesome Lists containing this project

README 

        
# FreeCodeCamp Forum Leaderboard 



This project is a solution to the [Learn Asynchronous Programming by Building an FCC Forum Leaderboard challenge on FreeCodeCamp](https://www.freecodecamp.org/learn/javascript-algorithms-and-data-structures-v8/learn-asynchronous-programming-by-building-an-fcc-forum-leaderboard/step-1). The challenge focuses on using asynchronous JavaScript techniques to fetch and display data from an API.



## Table of contents



- [Overview](#overview)

  - [The challenge](#the-challenge)

  - [Screenshot](#screenshot)

  - [Links](#links)

- [My process](#my-process)

  - [Built with](#built-with)

  - [What I learned](#what-i-learned)

  - [Continued development](#continued-development)

  - [Useful resources](#useful-resources)

- [Author](#author)

- [Acknowledgments](#acknowledgments)



## Overview



### The challenge



The goal of this challenge is to create a forum leaderboard that displays the latest topics from the freeCodeCamp forum. The leaderboard includes:



- Topic titles with links to their respective pages.

- Avatars of users who posted in each topic.

- Number of replies and views for each topic.

- Time since the last activity on the topic.



### Screenshot



![Forum Leaderboard Screenshot](Preview.png)  



### Links



- Live Demo: [View the Forum Leaderboard](https://codepen.io/Yashi-Singh/pen/vYqJPGw)



## My process



### Built with



- **HTML5** for the structure and layout of the leaderboard

- **CSS3** for styling and responsive design

- **JavaScript (ES6)** for fetching data from the API and dynamically updating the DOM



### What I learned



Working on this project enhanced my understanding of:



- **Asynchronous JavaScript**: Using `fetch` and `async/await` to handle asynchronous operations and manage data retrieval.

- **DOM Manipulation**: Dynamically creating and updating HTML elements based on fetched data.

- **Data Formatting**: Formatting time and view counts for better readability.

- **CSS Flexbox**: Using Flexbox to align and style avatar images in the leaderboard.



### Continued development



Future improvements for this project may include:



- **Enhanced UI**: Further refining the design and user interface for a more polished look.

- **Additional Features**: Adding sorting and filtering options for the topics.

- **Mobile Optimization**: Ensuring the leaderboard is fully responsive and functional on mobile devices.

- **Error Handling**: Improving error handling and user feedback in case of data fetching issues.



### Useful resources



- [MDN Web Docs - Fetch API](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API) - Documentation on using the Fetch API for network requests.

- [MDN Web Docs - Async Functions](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Using_promises#async_functions) - Overview of async functions and the `async/await` syntax.

- [CSS Tricks - Flexbox](https://css-tricks.com/snippets/css/a-guide-to-flexbox/) - Comprehensive guide to using Flexbox for layout and design.



## Author



- LinkedIn - [Yashi Singh](https://www.linkedin.com/in/yashi-singh-b4143a246)



## Acknowledgments



A big thank you to FreeCodeCamp for providing this challenge, which allowed me to apply and improve my asynchronous programming skills in JavaScript. Special thanks to the community and resources that provided support and inspiration throughout the project.