Coder Social home page Coder Social logo

website's People

Contributors

bolajiolajide avatar placeholder30 avatar

website's Issues

Configure CI/CD pipeline

When a developer pushes to master, it should automatically trigger a deploy to the staging environment.
However, creating a release with the tag prod-v-* should trigger a deploy to the production environment.

Setup Testing for Web app

Need to setup testing with jest and @testing-library/react so we can ensure the NExtJS app is properly tested.

Create Cookie Consent Form

Currently, we set a number of cookies mostly from Google Analytics, according to GDPR we need our users to consent to us collecting information about them which is used for analytics.

We should create a cookie consent form similar to that on userwise, it's the perfect one and very simple.

Screenshot 2021-07-25 at 10 23 10

This component should ideally be mounted in the pages/_app.tsx file, so it's going to be available across any page, when the user clicks the accept button, it should set a cookie with the key ANNIE_USER_COOKIE_ACCEPT and the value of 1 to show that the user has accepted the cookie.
You can use this library to serialize and deserialize cookies in NextJS.

Context Menu improvements

Good work on the Context Menu. It's cool.

Just a couple of fixes needed for us to close this out:

  • Remove the border in the context menu container and switch that to make use of box-shadow instead. You can use the value
box-shadow: -2px 4px 35px rgba(0, 0, 0, 0.25);
  • The Copy Link doesn't show a toast notification to notify the user. You can move this method into the utils directory so it can be shared by both TrackDetail and Playlist. Also remember to send analytics for copying the Annie link when Copy Link is clicked as seen here, you don't need to duplicate that whole method since it's just the ANNIE link the user will be copying.

  • The Open Link doesn't open the link when clicked, it should open the link in a new tab but it's not working. Also hovering on Open Link doesn't change the text to white as it does for Copy Link.

Add Context menu for Playlist tracks

Screenshot 2021-07-27 at 01 58 26

Currently, when you view a playlist page, if you click on the ellipsis menu beside each track, it opens up the track detail in a new page, the actual behavior we'd like is for a context menu to pop up.

The context menu should give the user the following options:

  • Open Link
  • Copy Annie Link

NOTE: At any point in time, only one context menu should be open.

You can explore any of the following libraries to achieve this:

I found this article when doing a research about context menus. I recommend react-contexify though because it takes care of a number of things out of the box.

Fix CI pipeline error

The last commit broke the CI pipeline because the yarn.lock file wasn't updated.

As discussed via Slack, all you need to do is delete the yarn.lock file , the reinstall the dependencies and everything should be fine.

Centralize Copyright text in mobile view

I believe due to some of the changes I might have changed some of the styling in the footer. Currently in the Track and Playlist pages, the copyright text isn't centralized on the mobile view.

Screenshot 2021-07-25 at 20 03 53

Here's a sample link for you to use to check this bug out.

Investigate slow page load

Since upgrading "next", we've been experiencing slow page loads. I'm not sure if the slow page load is related to the upgrade but it'll be nice to figure out what's causing.

Change wording for modal title

Screenshot 2021-06-25 at 13 52 37

When someone accesses an annie link, it's not always to share a song, so having the title of the modal as Share to ... can be a bit misleading.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.