I need a website in ReactJs
Budget: $30 – $250 USD
About Us
Rentis is an online platform that facilitates the rental of objects between users. We connect people interested in saving money by renting objects instead of buying, with people who have unused objects and who want to earn extra money.
We are a Brazilian startup starting an online platform. Perhaps the scope of the project and all the information are not in the best shape, but we have done our best so far to help anyone developing it.
What we need
Pages developed in ReactJs according to the Figma project and documentation in Notion, using the best practices in the development market. We accept suggestions for adjustments and improvements to the project. Maybe the Figma project doesn't have the best structure because we're beginners, but we've created a way to make it easy to identify the tasks.
Our platform will have 20 pages, but 60% with reusable ReactJS components
The website must have acceptable performance by today's internet standards (loading within 3 seconds)
The site will not have 3D animations or videos.
Authentication
We use JWT for user authentication and authorization.
❌WHAT YOU DON'T NEED TO DO
NodeJs BackEnd Development
• It is not necessary to develop the backend in NodeJs. We have our own developers
Connection to the database
• No need to develop database structure such as tables or MySQL connections
Server
• It is not necessary to develop or structure any cloud configuration for BackEnd, FrontEnd server
UI/UX Design
• There is no need to develop the design. We have the layout of each page in Figma, with the necessary structure for development.
• Style Guide: Color palette, typography, spacing, and standard visual components
API
• There is no need to develop an API. Only calls to endpoints
Payment checkout
• There is no need to develop the payment checkout. Only calls to endpoints
✅ WHAT WE NEED TO DO
Pages in ReactJs
• Platform pages developed in ReactJs
Structure JWT – Token
• Token Storage:
Store the JWT token in the browser's localStorage or sessionStorage
• Interception of HTTP Requests:
Use Axios interceptors to add the JWT token to the header of all requests.
Handling ERROR and SUCCESS Messages with Pop-ups
• Error
• Success
Credit Card Tokenization on the Front End
• Use Pagar.me API to tokenize credit card information before sending it to the backend
Device Responsiveness
• Cell phone
• Desktop
• Notebook
• WideScreen Monitors
• Tablets
Pagination of Cards on the HOME Page and SEARCH RESULTS Page
• Pagination Implementation: Use a pagination library like react-paginate .
Organization of Cards, according to the Filters Used in the Search Results
• Available Filters:
Category
Price
Location
Availability
• Ordering:
Relevance
Price (lower to higher/higher to lower)
User reviews
XSS Protection
• Sanitize all user inputs.
• Use libraries like DOMPurify
Compatibility with Major Browsers
• Google Chrome
• Mozilla Firefox
• Safari
• Microsoft Edge
Use the Next.JS Framework
• pages / directory to define routes.
• components / directory for reusable components.
• public / directory for static files.
• styles / directory for global and modular style files.
API requests
• Requests : Axios
Important comments and flags in the code
⚠ Optional but recommended Technologies and Tools
• Frameworks and Libraries:
Styling : Styled-components , SASS/SCSS
State Management: Redux or Context API
Routing : React router
Forms: Formik , Yup (for validation)
• Versioning: GitHub
• Build Tools: Webpack , Babel
• Tests: Jest , React Testing Library
Project Structure – Suggestion
• src /
• ├ ── components / # Reusable components
• ├ ── pages / # Application pages
• ├ ── services / # Services and integrations with API
• ├ ── store/ # State management ( Redux / Context )
• ├ ── styles / # Global and modular style files
• ├ ── utils / # Utility functions
• └── App.js # Main component of the application
Rentis is an online platform that facilitates the rental of objects between users. We connect people interested in saving money by renting objects instead of buying, with people who have unused objects and who want to earn extra money.
We are a Brazilian startup starting an online platform. Perhaps the scope of the project and all the information are not in the best shape, but we have done our best so far to help anyone developing it.
What we need
Pages developed in ReactJs according to the Figma project and documentation in Notion, using the best practices in the development market. We accept suggestions for adjustments and improvements to the project. Maybe the Figma project doesn't have the best structure because we're beginners, but we've created a way to make it easy to identify the tasks.
Our platform will have 20 pages, but 60% with reusable ReactJS components
The website must have acceptable performance by today's internet standards (loading within 3 seconds)
The site will not have 3D animations or videos.
Authentication
We use JWT for user authentication and authorization.
❌WHAT YOU DON'T NEED TO DO
NodeJs BackEnd Development
• It is not necessary to develop the backend in NodeJs. We have our own developers
Connection to the database
• No need to develop database structure such as tables or MySQL connections
Server
• It is not necessary to develop or structure any cloud configuration for BackEnd, FrontEnd server
UI/UX Design
• There is no need to develop the design. We have the layout of each page in Figma, with the necessary structure for development.
• Style Guide: Color palette, typography, spacing, and standard visual components
API
• There is no need to develop an API. Only calls to endpoints
Payment checkout
• There is no need to develop the payment checkout. Only calls to endpoints
✅ WHAT WE NEED TO DO
Pages in ReactJs
• Platform pages developed in ReactJs
Structure JWT – Token
• Token Storage:
Store the JWT token in the browser's localStorage or sessionStorage
• Interception of HTTP Requests:
Use Axios interceptors to add the JWT token to the header of all requests.
Handling ERROR and SUCCESS Messages with Pop-ups
• Error
• Success
Credit Card Tokenization on the Front End
• Use Pagar.me API to tokenize credit card information before sending it to the backend
Device Responsiveness
• Cell phone
• Desktop
• Notebook
• WideScreen Monitors
• Tablets
Pagination of Cards on the HOME Page and SEARCH RESULTS Page
• Pagination Implementation: Use a pagination library like react-paginate .
Organization of Cards, according to the Filters Used in the Search Results
• Available Filters:
Category
Price
Location
Availability
• Ordering:
Relevance
Price (lower to higher/higher to lower)
User reviews
XSS Protection
• Sanitize all user inputs.
• Use libraries like DOMPurify
Compatibility with Major Browsers
• Google Chrome
• Mozilla Firefox
• Safari
• Microsoft Edge
Use the Next.JS Framework
• pages / directory to define routes.
• components / directory for reusable components.
• public / directory for static files.
• styles / directory for global and modular style files.
API requests
• Requests : Axios
Important comments and flags in the code
⚠ Optional but recommended Technologies and Tools
• Frameworks and Libraries:
Styling : Styled-components , SASS/SCSS
State Management: Redux or Context API
Routing : React router
Forms: Formik , Yup (for validation)
• Versioning: GitHub
• Build Tools: Webpack , Babel
• Tests: Jest , React Testing Library
Project Structure – Suggestion
• src /
• ├ ── components / # Reusable components
• ├ ── pages / # Application pages
• ├ ── services / # Services and integrations with API
• ├ ── store/ # State management ( Redux / Context )
• ├ ── styles / # Global and modular style files
• ├ ── utils / # Utility functions
• └── App.js # Main component of the application