emanuelgf / template-react-ui

A super simple react quickstart template for a website project.

Hi there, I'm Emanuel 👋

I ❤ programming and learning new coding skills!

• 🔭 Currently working as a fullstack developer for Ympec.
• 🌱 More than two years of experience working with several tech stacks!

📩 How to reach me: [email protected] / emanuel-dev portfolio / LinkedIn

template-react-ui's Issues

Basic cypress testing

Create some basic testing using cypress for the home and about pages.

Common footer features

Since footers on most project types have similar characteristics (Links, social media, company info, etc). The goal would be to make these common features ready available on the project. (Creating a standard design would be ideal, something that would be easy adaptable to other design requirements).

Run cypress tests on all viewports.

Goal:

• To have the cypress tests run on various viewports to test functionality on screen sizes of multiple devices.
• Should test on mobile and desktop screens.

Update README.

The folder structure info on the README file needs to be updated with the newly created cypress folders.

Potential solvers:
@inezabonte
@BillNas

Adding Cypress for testing.

Cypress
"Cypress framework is a JavaScript-based end-to-end testing framework built on top of Mocha – a feature-rich JavaScript test framework running on and in the browser, making asynchronous testing simple and convenient. It also uses a BDD/TDD assertion library and a browser to pair with any JavaScript testing framework."

Should be added to the template as a starter? yes? No?
What are your suggestions?

Separate components and pages

In some projects I have seen a different approach being used towards separating components and pages

• Usually a pages or views folder is used to store the actual pages on your website.
• Components page is used to create components such as Navigation bars or footers which are then imported into a file in the pages folder.
• Just a thought I had. You could consider it.🙂

SEO ready

Is your feature request related to a problem? Please describe.
Yes, currently the template is not SEO optimized.

Describe the solution you'd like
Implement better SEO coverage (code implementation) out of the box.

Describe alternatives you've considered
Nothing else considered...

Additional context
SEO is common and virtually mandatory on all websites, it would be a time saver to have minimum SEO coverage on the code on this template. 👌

Better project architecture.

Implement a better system architecture to decouple code, and to make it better for testing. Design pattern could be something like MVVM.

Check the following article for ideas: FrontEnd Architecture

• Create a better folder structure consistent with a chosen pattern.
• Simple working examples can also be created to implement the pattern (eg. routes with api calls and services. )

Update info on "Added features" (README).

When a user follows a broken or dead link a basic "404 - page not found" page is displayed. (try: http://localhost:3000/notvalid)
On the project README file add this info to the "Added features" section.

Features to add.

Any suggestions on features that are common to most websites that could be added to this template❔

Format folder structure on README.

The markdown format on the folder structure on the README doesn't look nice. It could certainly be better formatted for better understanding.
Checkout this related stack overflow post with similar request. here

Privacy policy and terms of service pages.

Legal information is a requirement on all websites. (eg. Privacy policy, terms of service)
Goal: create necessary standard legal pages (components) to be readily available on the project. Create necessary links on the footer.

Show technologies used on the README

Add technologies badges to the README file to better inform the users of which techs are being used.

get badges from here

Layout problem on small viewports

Fix layout to display correctly on small viewports.

Error boundaries.

Missing basic setup of error boundaries. Should they be implemented at all? 🤔
react error boundaries

UI template

Should the website UI template be enhanced to include more common features ❔ Let me know what you think. 🤷‍♂️

Better "404 - Page not Found" page

Create a better design for the "404 - Page not Found" page (NotFound Component).
Currently it only displays a h1 with the "404 - Page not Found" text and with no styling... 🤔
The objective is to give it some nice styling so that the 404 page could potentially fit any project created from this template and needing little to no changes.

Deploy the Template

Is your feature request related to a problem? Please describe.
Currently the template is not deployed. So the user would have to clone it and
start the application in order to see what the template look like

Describe the solution you'd like
It would be nice to have the template deployed on hosting services like
Netlify, Vercel or github pages. So that whoever wants to use it knows what they are getting

Describe alternatives you've considered
N/A

Additional context
N/A

Pagination on the about page

Goal:

• Create pagination for the about page content.

Requirements:

• Use bootstrap pagination

Change Title

Remember to change the title.