chris-yooo / chrat

React App

This is a template for a Create React App with additional tools.

• Tech-Stack
• Project Setup
  • Set up Vercel
• Getting started
• Test Driven Development
• Commands

It uses the following tools/libraries:

Tech-Stack

• Storybook
• Jest
• Stylelint
• Eslint
• Prettier

Project Setup

This project uses different deployments to make code reviews easier:

• Vercel (App Production)
• Vercel (App Preview)

Set up Vercel

Please follow this guide: https://vercel.com/docs/concepts/git

Getting started

Run the development server:

npm run start

Run storybook:

npm run storybook

Test Driven Development

We use jest to write unit tests. Please look at the Documentation for Jest and testing-library.

Commands

Run the development server:

npm run start

Build:

npm run build

Run storybook:

npm run storybook

Build storybook:

npm run storybook:build

Run all tests:

npm run test

Run stylelint

npm run stylelint

Run eslint

npm run eslint

Run all linters

npm run lint

:)

chrat's Issues

chRat - auto message GET

Value proposition

As a user,
I want to read new sended message from other users directly without refreshing the page
so that it comes more confortable

Acceptance criteria

• messages comes automaticly after ~5 seconds

Complexity

Large

Tasks

• insert a timer that trigger the useEffect

chRat - date format

Value proposition

As a user
I want to read the date as a human
so that i can read it

Acceptance criteria

• date in a good format like dd.MM.YYYY HH:MM
• not this one: 2022-08-16T12:23:39.857+00:00 ...

Complexity

Medium

Tasks

• date replace func implement to chat

chRat - registerpage

Value Proposition

As a User
I need to register
to be able to login

Description

• You got no account information -> yeah now we can register our own login credentials.
• The loginpage become a register button

- when you click on it the register page appears

• here you must input a username and a password
• with a click on submit your datas are send to the app and you navigate automated back to the loginpage

Acceptance Criteria

Loginpage:

• 1 register button thats switch to the register site

Registerpage:

• 2 input fields -> username input | password input
• 1 button to submit data

Tasks

• 1 button with function to navigate to registerpage
• create registerpage
• 2 input fields username and password
• both inputs are required!
• 1 submit button to submit the logincredentials

chRat - database

Value Proposition

As a user
I need a database
to be able to use the app without fake data

Description

I have to change the fakedatas into real data and connect all inputs and outputs to mongoDB.

Acceptance Criteria

• i can write messages that are displayed later in the mainpage
• i can see old messages that are writed in the Mainpage

Tasks

(for developers team)

• connect the mainpage output with mongoDB
• connect the mainpage message input function wit mongoDB
• use effect to display the chat messages
• implement the mongoDB

chRat - loginpage

Value Proposition

As a user
I need to login
to be able to chat

Description

• When you connect to my homepage you now should log in before the actual mainpage shows up.

Acceptance Criteria

There are come edgecases and criteria for the login:

Loginpage:

• 2 input fields -> username input | password input
• username are req.
• password are req.
• whitesspaces are not allowed/work
• special characters are note allowed/work
• only letters in upper and lower case are allowed and work
• 1 login button

Tasks

(for developers team)

• create loginpage
• create an array with objects these are to represent testlogins
• 1 input username with criterias from Acceptance Criteria
• 1 input password with criterias from Acceptance Criteria
• 1 button with function to login with credentials from input fields
• look at accessibility!

chRat - mainpage

Value Proposition

As a user
I want to send message's
to be able to read them

Description

Acceptance Criteria

Maincontent/Chatpage:

• new messages added below
• 1 input field -> to submit messages in the message pool
• 1 button to submit message
• the input field cannot be empty
• after send the form have to empty again

Tasks

(for developers team)

• global styles
• create main chat content page
• design little chat windows that are displayed in the "chatbox" (new chat windows added below)
• 1 input field with message
• 1 button to submit the message
• look at accessibility !
• add to App

chRat - imprint page

Value Proposition

As a user
I want to open a hamburger menu at the bottom
to navigate to a new page imprint

Description

• my hamburger menu appears at the bottom on every page.
• In it i got a button to navigate to a new page with "imprint" content.

Acceptance Criteria

Hamburger-menu:

• the menu with sticky at the bottom
• the possibility to open it and close it
• 1 button to open imprint within the hamburger menu

Imprintpage:

• textfield
• implement hamburger menu

Mainpage:

• implement hamburger menu

Tasks

(for developers team)

• create imprint page
• create the hamburger menu
• implement hamburger menu on mainpage and imprintpage
• possibility to open it and close it
• 1 button to close the hamburger menu
• look at accessibility !
• 1 button to open the page "imprint"
• the backbutton navigate to the mainpage
• implement routing/navigate function

chRat - logout button

Value Proposition

As a User
I need to logout when i am logged in

Description

• a little adjustement is when you logged in the hamburger menu have to be become 1 more button to logout.

Acceptance Criteria

• logout button in the hamburger menu
• shows only when your logged in
• when you click on it you pageflipped to loginpage

Tasks

(for developers team)

• create an logout button
• navigate function to loginpage

chRat - autoscroll

Value proposition

As a user,
I want to read the latest message direct without scroll down
so that I don't have to scroll

Acceptance criteria

• all new messages are on top of the latest
• they have to scroll down to the message automaticly

Complexity

Medium

Tasks

• implement auto scroll down function

chRat - about page

Value Proposition

As a user
I need to open the about page
to be able to read them

Description

My hamburger menu need an second button to navigate to aboutpage.

Acceptance Criteria

Hamburger-menu:

• 1 button to open about within the hamburger menu

Aboutpage:

• textfield
• implement hamburger menu

Tasks

(for developers team)

• create aboutpage
• 1 button to open about within the hamburger menu
• the backbutton navigate to the mainpage
• implement hamburger menu on aboutpage
• look at accessibility !