spaceyatech/team-berlin-react

Repository for Team Berlin

team-berlin-react's Issues

Convert this Javascript code base to TypeScript

Here are 4 strong reasons to use Typescript for this project.

• Easy to read and understand components:

With TypeScript, it’s easy to define Prop types, making the code much easier to read and use. And this will accompany by IntelliSense support plus static type checking.

• Better support for JSX:

Another additional benefit of TypeScript + React is that it provides better IntelliSense, code completion for JSX.

• Default TypeScript support for common libraries:

the React library ecosystem already supports Type Definitions, where you don’t need to worry about it anymore.

• Gradual adoption for existing projects:

Going for TypeScript is not an on-off switch. It is instead a gradual adaptation depending on the current condition of the project

Create a Better Project Readme that explains more on what the project does and how to contribute

Create A Better ReadMe Explaining What The Project Is About
The Readme should also include the product vision and what the product is about.

Add guidelines for repository contributors

This guidelines will help your project contributors do good work, I will add a file with contribution guidelines to your project repository's root, docs, or .github folder.
When someone opens a pull request or creates an issue, they will see a link to that file. The link to the contributing guidelines also appears on your repository's contribute page.

[Frontend}: Set up ESLint, Prettier, Pre-commit Hooks and Husky to the React project

When setting up a new project, especially the one that will be worked on by many people (team), code quality is an important aspect to put into consideration to make your codebase cleaner and standardized. That's why we need to use different tools that ensure our code quality.

[Frontend] Create Project Structure

As a developer
I want a project template
So that I can contribute to the project.

Additional Notes
For each frontend team (React, Angular, Vue, PHP, or any other frontend framework) create the project template which will serve as the starting point of developing the applications.
Note, don't add any unnecessary dependencies or thirdparty libraries which we don't need for the project

Acceptance Criteria

• A simple CLI generated frontend project
• Use the right names for the projects
• No unnecessary third-party libraries

[Front-end]- Create Project wide Variables and Constants

As a developer
I want to define global constants and variables
So that i can easily reuse them across the project

Additional Information

• For this issue, focus on defining global variables for colors, fonts, and other specific assets to be used across the application.
• For easier re-usability across the project, define global variables for colors, fonts and other assets which are to be used across the application.

For CSS for instance to define global variables use:
:root {
--syt-primary-color: #252533;
--syt-secondary-color: #00ffc3;
--syt-white-color: #ffffff;
}

element {
background-color: var(--main-bg-color);
}

All the colors and fonts have already been defined by your respective Design Teams
Reference
Figma file

Acceptance Criteria

• Constants and variables should follow the project global universal format eg. camel case etc

Checkout Example

• Stackoverflow

Configure the project Tests Using Jest and Enzyme

Description

As a developer
Update the project with the Jest and Enzyme
Update the Readme After this setup

Reference

• Digital ocean
• Blog 1
• Jest doc
• Medium 1

Read more

Acceptance

• Set up the jest and enyme testing
• Update the readme on added files

[Frontend]- Create forgot password-001 component

Description

As a developer
With regards to the screenshot below and the figma file
Assets on figma file

Screenshot

[Front-end] Create Navigation Bar #Header

Description

As a developer
I need the header navigation bar
As reference from the figma file

Screenshots

Files

Here is link for reference, Figma File

To Reproduce

If this issue is describing a bug, include some steps to reproduce the behavior.

Tasks & Acceptance Criteria

The following nav links should be included

• Home
• About Us
• Forum
• Event
• Our Blog
• Jobs

[Frontend] - Create the sign-in component

Description

As a developer
With regards to the screenshot below and the figma file
Assets on figma file

Screenshot

Reference

• Figma design

Chore: Add Pull Request templates/Issue templates for this repository

Issue to Add Pull Request templates/Issue templates for this repository

I’ve been thinking about creating GitHub issue and pull request templates for this project. These templates auto-populate the issue/pull-request description field and provide a skeleton framework that you can fill out.
I like these templates every time I come across them, since they help provide a baseline standard of informational quality and organizational rigor.

[Frontend]- Installation and configuration of Tailwind to the project

As a developer

Install the tailwind css framework
No third parties libraries are allowed

Additional Information

• Tailwind Documentation

[Frontend]- Create forgot password-002 component

Description

As a developer
With regards to the screenshot below and the figma file
Assets on figma file

Screenshot

[Front-end]- Create Project wide Variables and Constants

As a developer
I want to define global constants and variables
So that i can easily reuse them across the project

Additional Information
For easier re-usability across the project, define global variables for colors, fonts and other assets which are to be used across the application.
For CSS for instance to define global variables use:
:root {
--syt-primary-color: #252533;
--syt-secondary-color: #00ffc3;
--syt-white-color: #ffffff;
}
All the colors and fonts have already been defined by your respective Design Teams
Reference
Figma file

Acceptance Criteria

• Constants and variables should follow the project global universal format eg. camel case etc

[Frontend] Creating signup component

Description

As a developer
With regards to the screenshot below and the figma file
Assets on figma file

Screenshot

Reference

• Figma design

[Front-end] Create Footer Component

Description

As a developer
I need the footer components
As reference from the figma file

Screenshots

References

• Check the screenshot above
• Assets are available on the figma link
• Get more from figma file

Acceptance

• All details should resemble the design format