alejandroyanes/activate

Code Style Guide

Import order

1. libraries (react, axios, ...)
2. models
3. apis
4. helpers
5. event-center / notifications
6. base-components
7. experience components
8. local files (relative to the page / component being coded)
9. style files

Go check it out

This project was bootstrapped with Create React App. You can check our early build here

Available Scripts

In the project directory, you can run:

yarn start

Runs the app in the development mode.
Open http://localhost:3000 to view it in the browser.

The page will reload if you make edits.
You will also see any lint errors in the console.

yarn test

Launches the test runner in the interactive watch mode.
See the section about running tests for more information.

yarn build

Builds the app for production to the build folder.
It correctly bundles React in production mode and optimizes the build for the best performance.

The build is minified and the filenames include the hashes.
Your app is ready to be deployed!

See the section about deployment for more information.

activate's Issues

Implement the event details page basic layout

Implement the responsive layout design

The main idea is to implement an API that (using context) broadcasts through the app the layout to use and the components will have variations of components mapped to the possible layouts so there should be no need for if statements or at least a reduced number of them. Since the major components (the 3 sections) have fixed width, the breakpoints are going to be when they don't fit anymore.

• in the smaller width, the right panel will disappear, the left panel will go to the bottom, and the main content will be centered (padding: 64px 32px 0)
• in the medium view the right panel will disappear

When the right panel disappears it should be replaced by a floating button to the bottom right that on press it'll pop a drawer with its content

Implement Event planning tools

the app should allow a client to track the planning of an event from start, till it's done and the event goes live

Fix all current lint errors

Implement the comments section of the event details page

implement the tabset/tab component animations right

when a new tab enters it should make itself room by pushing the adjacent tabs, using the scale CSS property does not output the best result as it starts with all the width in the DOM, and the animation is only visual, so the gap can be seen as the animation occurs

Implement bsse button components

Implement base button components using styled-components

Implement the Settings in the Profile view

Implement loading animation for the button

Implement a chat API

the app should let users chat with each other and with the publishers

Implement a Switch/Case Component

Feat: Implement add comment

Allow users to add new comments to an event

Refactor experience components to use styled-components

Implement a Dashboar page

It will show the events the user is following that are more close to happening, in the way of a calendar events view, using a timeline like UI

Change the scroll bar design

features:

• it should render over the content, not push it
• it should hide when its not being used
• it should show when the pointer is near and should look faded
• it should look normal when the mouse its hovering it and darker when clicked

Implement a priority ssytem for the right panel tabs

there must be logic that decides where a tab should fall in the order

Implement a Publisher profile

this is the page users are going to see when entering a publisher page

Implement internationalization

Implement a Publishers page

it will show the current active publishers and a small description

• it should list the items as cards with an image to the left, the name, description and how many events have published so far
• it will provide a link to the profile page of the publisher

Event card / details improvements

• the event title should also link to the details
• the user should be able to follow and event from the details
• any user can report a comment to the moderator
• the comments may have a response, that will come from the moderators of the event
• the event title has to be moved to the left
• the actions should be placed below the image, to the right of the tabs

feat: implement mark as seen for all new updates

Implement side panel interactions

There should be a way for the side panel tabs to change based on the current page

Implement an Upcoming events panel

• it will replace the summary Panel
• it should use the Timeline component
• it should display relevant information related to the events the user is following
• it will only show the events closer to happening and use a View all button to navigate to the profile view in the tab of the same name

Reafactor the Avatar menu

• remove the name
• remove the wrapper button
• change the right icon to an HTML design and add animations when opening or closing the menu
• show the name of the user inside the menu
• show the edit profile and logout actions as buttons at the bottom of the menu

Implement a menu base-component

there is a component implemented but needs refining

Add some configuration improvements

improvements:

• install craco and replace absolute path
• install TsLint as an extension of EsLint

Implement a Summary panel

it should show:

• up to 4 of the upcoming events followed by the user
• the 4 more liked events
• the 4 more trending tags (pending review)

Fix the styled-components issue

the most likely solution is to remove the rainbow-components library and self implement the components

Change the animation of the side-nav items when selected

implement the animation and design using an SVG filter

Feat: Implement all missing empty states

Implement options component

The idea of it is to act as radios, so it must allow only one to be selected, it will behave similar to the tabs/pick-list but it'll be smaller

Feat: Implement a password strength UI

modify the UI listing the password requirements to show when the password matches each requirement

Implement the scroll behavior of the pick-list and the day-calendar

The components need to recognize when the need to show scroll components, shouldn't be the default

Implement a Discovery page

It should list:

• the upcoming events
• the most liked events

Feat: Implement username compliance UI

Implement the clock animations

it should move the hour, minute, and AM/PM markers up and down when they change, the direction must be relative to the new value, up if the new value is bigger, down if it is smaller.

Implement the search UI and logic

the search should happen in the aux panel, showing the input and any other advanced filters

adjust the z-index levels

right now the left and right panels are showing over the backdrop and the calendar modal

Implement Notifications Page

Implement a set of Typography components

it should have all styles and heights used through the app

Implement Datepicker component

the component should allow:

• to select dates or a range of date
• to select a time or a range of times

Implement a page navigation API

the app should allow users to go back when they enter a details page, most likely by a button (using a back arrow)

Review the Inputs and buttons styles for light/dark style colors

Implement Aux Panel navigation

refactor: move user events to the profile page

feat: implement infinity-scroll behavior

Implement a Profile page

Implement Search Page

Implement theme API

The API should provide the current theme to any component through a context API

Feat: Change the Search page UI to be more organic

The idea is to show a simple search input and after the search use a UI to show results count and also show featured results