Rev
notion image

Short Explanation

DelosNews is a website for a premium article shopping system that would allow users to buy the available articles from NYTimes. Notably, this project was undertaken with the purpose of fulfilling the requirements set by DELOS for internship recruitment test.

Project Goals

  • Article list page that shows all articles that users can buy and users can filter it by these criteria:
    • Most Emailed
    • Most Shared
    • Most Viewed
  • A detail page that consists of information about the Article, should minimum consist of Cover Image, Title, Author, Abstract, and Publish Date.
  • User bought articles page, consists of all articles that the user has bought.
  • Get lucky coin page, for every minimum purchase of 50.000 coins, the user gets 3 tickets to redeem to a lucky draw, with a random reward.
  • Users have starting coin of 100.000
  • The price of each article is:
    • For articles published more than 7 days ago, is free. But the maximum bought articles should be no more than 5 articles
    • For articles published in period less than or equal to 7 days ago, is 20.000 coins
    • For articles published in a period less than or equal 1 day ago, is 50.000 coins
  • Users cannot buy the same book
  • The list pages should be able to handle a search function.
  • The list pages should have pagination, or you can also use infinite scroll for the pagination.
  • The detail page should have an action for users to buy the book using their balance Users can open the link to the article after buying it (even though the user will be asked by NYTimes to subscribe)

Tech Stack Used

This project utilizes React with Next.js, MobX for state management, SWR for API calls, Typescript for strong typing, React Toastify for toast components, and Tailwind CSS for styling.

Spotlight

This project got me accepted to DELOS without any further test.

The Problems and How I Solved It

Using a meta-framework like Next.js for the first time brought some challenges. I was initially unsure about how server-side components worked and how to keep the state in sync between the server and the client. But with effort and learning, I successfully tackled these challenges and grasped the workings of Next.js.

Lesson Learned

Trying out new technologies taught me to be open-minded. I realized that taking the time to learn and explore is key to overcoming challenges and understanding new concepts.