Trending Topics Web

Trending Topics website is created using NextJS, TypeScript, and Tailwind CSS. On the Home page you can view mock trending topics data, and each topic can be clicked to go to the Detail Topic page. This website has also developed to be responsive on mobile.

Setup Requirements

• Node.js 18.17 or later
• Supported on Windows, Linux, macOS

Clone Project and Run Locally

1. Run git clone https://github.com/felicia-11/trending-topics-web.git
2. Run npm install
3. Run npm run dev
4. Visit http://localhost:3000 to view application's result

Regarding Image Resources

• Website logo is created manually using Photoshop CC
• Parallax banner's background got from Wallpapers
• Dummy profile picture on comment section got from Pixabay
• Loading GIF on Load More button got from Gifer

Mock API Endpoint

The mock API endpoint is created using mockAPI. Please note that there are limitations with mockAPI, therefore:

• Responses between GET all and GET detail topic cannot be differentiated, hence on call GET all topics the API will also return unused data such as comments, ads_image, ...etc
• Topic's images will change every time the endpoint is called since the images are generated using Faker.js provided by mockAPI
• Topic's images (which have this type of path https://loremflickr.com/640/480/[image_type]) are only generated & randomized when the API is first called by the page and the request will be cached, hence we will get the same images every time we request for more images without refreshing the page
• New comment cannot be saved to API
• Trending topics and commenters' data are also generated using mockAPI and the descriptions are generated using Lorem Ipsum Generator to prevent copyright abuse

Developer's Note

• I didn't use Server Side Rendering (SSR) in this project since I use App Router (SSR is not compatible with App Router)
• You can click on the advertisement like on the actual news site, don't worry it will just open random image from LoremFlickr on new tab!