{"id":13343906,"url":"https://github.com/bahobab/reddit-timer-bahobab","last_synced_at":"2026-02-03T17:17:46.798Z","repository":{"id":39023374,"uuid":"297765402","full_name":"bahobab/reddit-timer-bahobab","owner":"bahobab","description":"React, Reddit API project - Shows subreddit posts time by topic. Implemented Jest, React Testing Library, Cypress","archived":false,"fork":false,"pushed_at":"2023-01-06T14:44:21.000Z","size":5994,"stargazers_count":0,"open_issues_count":18,"forks_count":0,"subscribers_count":3,"default_branch":"master","last_synced_at":"2024-07-30T21:08:30.906Z","etag":null,"topics":["clickup","cypress","react","react-testing-library","reddit","zeplin"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/bahobab.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2020-09-22T20:33:14.000Z","updated_at":"2020-12-06T04:03:30.000Z","dependencies_parsed_at":"2023-02-06T05:31:48.130Z","dependency_job_id":null,"html_url":"https://github.com/bahobab/reddit-timer-bahobab","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":"ooloo-io/reddit-timer-base","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bahobab%2Freddit-timer-bahobab","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bahobab%2Freddit-timer-bahobab/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bahobab%2Freddit-timer-bahobab/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bahobab%2Freddit-timer-bahobab/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/bahobab","download_url":"https://codeload.github.com/bahobab/reddit-timer-bahobab/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":221274932,"owners_count":16789690,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["clickup","cypress","react","react-testing-library","reddit","zeplin"],"created_at":"2024-07-29T19:32:05.242Z","updated_at":"2026-02-03T17:17:46.757Z","avatar_url":"https://github.com/bahobab.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003c!-- I use this template: https://github.com/dbader/readme-template/blob/master/README.md --\u003e\n# Reddit Timer\n(or How to find the best time to post your subreddit)\n\nUse historical posts data to determine the best time to post a subreddit.\n\nThis project is the result of a course by [ooloo.io](https://ooloo.io/).\nThe project aims to build a professional web app with professional tools and methods.\n\nThe lead developer [Johannes](https://jkettmann.com/author/johannes/) at ooloo.io provided the project designs in [Zeplin](https://zeplin.io/) with tasks managed in [ClickUp](https://clickup.com/) management tool.\nOne of the requirements is that each taks be implemented within its own pull request(PR). And the PR is reviewed by the lead developer before it's merged.\n\nBeside the project being implemented with the React library, additional tools and packages nesesary to deliver the project to plan were free to choose.\nDuring the development process, I occasionally used TDD methodology to implement some tasks, such as header, footer, form tasks.\n\nTo ensure code quality and conformity an end to end (e2e) Cypress test suite was also provided.\nI implemented the integragration tests using React Testing-Library to meet the project's acceptance criteria (AC).\n\nThe folowing are the screenshots of the different stages of the project:\n\n![Home page](https://res.cloudinary.com/krikitue/image/upload/v1603729023/reddit-timer/homePage_rpbxun.png)\n![Search page](https://res.cloudinary.com/krikitue/image/upload/v1603729024/reddit-timer/searchPage_lchzu0.png)\n![Loading the data](https://res.cloudinary.com/krikitue/image/upload/v1603729496/reddit-timer/loading_ncgf0d.png)\n![Display the posts](https://res.cloudinary.com/krikitue/image/upload/v1603729024/reddit-timer/posts_sgabn4.png)\n\n## Tech Stack used:\n1. **React/React Hooks**\n2. **Styled-components**\n3. **Cypress**\n4. **React Testing-Library**\n\n## Tools\n1. [ClickUp](https://clickup.com/)\n2. [Zeplin](https://zeplin.io/)\n3. [Perfect Pixel](https://chrome.google.com/webstore/detail/perfectpixel-by-welldonec/dkaagdgjmgdmbnecmcefdhjekcoceebi?hl=en)\n4. **GitHub** version control repository\n5. **Slack** Team communication tool\n\n## I Proposed these Added Features\nFor me this is the most important part of the project where I was able to apply the knowledge learnt to propose features and deliver solutions to improve on the app.\nSo in addition to the original AC (acceptance criteria), I proposed and implemented the folowing features:\n\n1. **highlights for cells** containing posts with deleted author\n2. display the posts table in **modal mode to avoid the table to show below the fold**.\nwe could implement auto-scoll but the user would have to scroll up back to the heatmap grid again. I think offering an modal display option was practical.\n3. **choose the heatmap color theme** to provide the user with another viewing comfort.\n4. **make the app responsive** on all devices.\n5. provide **integration and end to end tests for these features** without breaking the original AC.\n\n## Features Solutions screenshots\n\n1. Cell highlight to indicate it contains deleted author\n![Feature #1](https://res.cloudinary.com/krikitue/image/upload/v1603729023/reddit-timer/feature_1_wnshm8.png)\n2. choose the heatmap color scheme\n![Feature #2](https://res.cloudinary.com/krikitue/image/upload/v1603729023/reddit-timer/feature_2_ygcnrv.png)\n3. display the posts table in a modal window\n![Feature #3](https://res.cloudinary.com/krikitue/image/upload/v1603729023/reddit-timer/postsModal_wy5ai7.png)\n4. responsive on small screens\n![Feature #4](https://res.cloudinary.com/krikitue/image/upload/v1603729023/reddit-timer/responsive_fgefov.png)\n5. tests\n![Feature tests](https://res.cloudinary.com/krikitue/image/upload/v1603729024/reddit-timer/tests_g26rwl.png)\n\n## Project Highlights\n\n- The use of [styled-components]() makes it easy to solve css issues for the heatmap color scheme.\n- Tags are components offering flexibility and ease of styling\n- Practical components design structure and **'DRY' coding technique** with global variables and styles used throughout the app\n- Efficient successive **fetch calls using recursion**\n- Effective use of **reduce functions composition** to yield complex data\n\n- **Testing using snapshot** for the table that has 168 cells.\n- **Mocks to avoid puting strain on memory**\n- **Avoid data mutation on a parameter passed by reference**\n\n## Take Away from this Project:\n\n1. Work as Pro frontend developer using Pro methodology and Tools:\n- Agile project management with ClickUp\n- Slack Team collaboration platform\n- E2E testing with Cypress\n- Jest and React Testing-library (with hooks and mocks)\n- Team linting style\n2. Professional Git pull request (PR) workflow:\n- pull requests (PR)\n- code review\n- branch merge\n- branch conflicts resolution\n3. Production Deployment\n- Live app deployed to Netlify with CC/CI webhook\n4. Apply techniques learnt to extend/improve the app UI/UX as detailed in [Features section](#I Proposed these Added Features)\n\n## Installation\n\nOS X \u0026 Linux:\n```sh\nyarn install\n```\n## Usage\n\nAfter all the packages have been successfully installed, you can run:\n\n```sh\nyarn start\n```\n## Test\n\nRun the tests with:\n\n```sh\nyarn test\n```\n\n```sh\nyarn cypress:open\n```\n## Meta\nKonan Houphoue – [@linkedIn](https://linkedIn.com/bahobab) – khoophdev@gmail.com\n[https://github.com/bahobab](https://github.com/bahobab/)\n\n\u003c!-- ## Contributing\n\n1. Fork it (\u003chttps://github.com/yourname/yourproject/fork\u003e)\n2. Create your feature branch (`git checkout -b feature/fooBar`)\n3. Commit your changes (`git commit -am 'Add some fooBar'`)\n4. Push to the branch (`git push origin feature/fooBar`)\n5. Create a new Pull Request --\u003e","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbahobab%2Freddit-timer-bahobab","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fbahobab%2Freddit-timer-bahobab","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbahobab%2Freddit-timer-bahobab/lists"}