jamesncox / secrets Goto Github PK

Description

Removes Ant Design from project. This just isn't the right project to use Ant Design.

AC

1. Ant Design package and related packages are removed from package.json.

Description

Adds React Popup to handle various messages to users and primarily display info about the chat room

AC

• Pop up is fully customizable and responsive
• Pop up is accessible (can access with keyboard)
• Pop up can handle other methods like copy-to-clipboard

Description

Come up with a system to generate a unique, easily shareable ID for the chat room and persist it to local storage.

AC

1. IDs are unique but not too complex to share
2. IDs persist to local storage under an identifying prefix of secrets-app-

Description

This is the BIG ONE: wire up Socket.io to send and receive messages. Will likely involve significant refactors to UI/UX in order to make sense of Socket.io and how it is supposed to be used.

AC

• Users have a unique ID
• Can send messsages
• Can receive messages
• Messages scroll to the bottom when a new one is entered by user
• Messages sent by the user display "you"
• Messages received by the user display the sender's name
• Messages sent by the user are right-aligned in the purple bubble
• Messages received are left-aligned in the rose bubble
• Messages are saved in localStorage
• Messages are cleared out of localStorage when the user leaves the room

Description

Create and design the rooms portal, adhering to mobile-first principals (default to smaller screen sizes).

AC

1. Uses as many Ant Design components as possible, for inputs, buttons, icons, etc.
2. Responds to various screen sizes. Refer to Tailwind breakpoints docs.
3. Uses the Figma Secrets file for CSS properties.

Mobile

Desktop

Description

Create the view for sending messages.

AC

• Designed mobile-first, adhering to Tailwind breakpoints
• Has similar "box" structure as the portal view
• Has a "Room ID" button that will trigger pop-up/modal with the room's ID
• Has a enter message input form with a "message" button
• Has hard-coded messages in the purple and rose style
• Message bubbles have been styled according to Figma file

UI/UX

Mobile

Desktop

Description

Creates the SECRETS header and No one will know sub-header

AC

1. Add Text me one font to CSS file
2. Add Roboto font to CSS file
3. Reference Tailwind Breakpoints for responsive actions
4. Design with "mobile-first" properties
5. Uses the Figma Secrets file for CSS properties.

UI

Secrets header

Mobile

Desktop

Description

Create the portal that displays the newly-created room ID and an input form for the user to put in their display name.

AC

1. Resembles the Figma design
2. Mobile-first design, fully-responsive on all screen sizes. Refer to Tailwind breakpoints docs
3. Displays Room ID
4. Has input form for username
5. When display name is entered, show chats portal

UI/UX