We are looking for a React / Next.js / Graphql developer to finish a website, based on a pre-existing React / Next.js template

Project overview

Hi there, This opportunity below appears to be large and extensive, but do not worry. It's about the most common scenario of an application that has advertisements and filters on a React / Next.js application . The reason for the "large" text here is to explain exactly 100% of the capabilities of the project. Written from a Developer to another one. What are we looking for? We are looking for a React / Next.js / GraphQL developer to finish a website, based on a pre-existing React / Next.js template Use Case It's about a very common website that gathers rental car companies, their cars, and their advertisements with pricing, with the possibility to contact companies by a form. Pré-requisites Only candidates with proven experience and online projects will be accepted. Candidate need to have a strong knowledge in GraphQL queries writing, React and Next.js This project will need to be deployed on a Microsoft Azure Environment thought Azure Devops Pipeline Resume of this project and technical aspects We need to finish a project already started by another developer. Most of the features are done, but it will be necessary to improve the code quality. We already have the React / Next.js template bought from a template portal. We already have the GraphQL Server ready to use, online and running. Most of the GraphQL queries are already working (queries and mutations), but new queries will be necessary to be created. Along the description, we are going to share the status of each feature (done or not yet) The React / Next.js developer will work together with us, and will be free to ask for some new features on our GraphQL server anytime. Deliveries will be made on Azure Devops Github. GraphQL Server and queries We already have a GraphQL server running, with data, advertisements and all capabilities. There is nothing to do here. This GraphQL server already has all the business rules, and capabilities, so, you don't need to add business verifications on the JS. Only some new GraphQL queries and mutations will need to be written. Most of the common queries are already done. All the business messages already come from our server. Example: email already exists, etc. GraphQL returns are standardized, and follow very simple rules to call and return. Database aspects The database is already modelled, created, with data and working properly. This case uses the most common database modelling (User -> Advertises -> Attributes and Attribute Values). The database modelling is based on attribute / attribute value types, so, the search filters are easy to be applied. Similar references and examples (React and GraphQL) This project is very similar to a React / Next.js / GraphQL project that could be checked on this URL. https://shop-pickbazar.vercel.app https://admin-pickbazar.vercel.app https://pickbazarapi.redq.io/front/graphql (GraphQL Server) * The GraphQL schema is very close to this model, but not identical. * This project is very similar to what we are looking for. Roles There are two roles on the project: Visitors (which is a basic user visiting, and vendors that own and manage the advertisements). Roles are stored on a JWT. The structure for the authentication on the server side is already done, and working properly. React / Next.js technical aspects Features written on this project need to be created in a componentized way, to be re-used in other projects We accept the possibility to start from zero, reusing the functionalities already developed. In case you prefer to reuse features that are ready, "marked here as a done", I really recommend a brief refactoring in case. The application cannot have errors on the console, or java-script errors. GraphQL Queries We recommend the creation of a javascript function that reads GraphQL queries from a .graphql file, to avoid putting queries on the JS files. These files could stay inside the project. Forms validation, and paginations Please consider that all forms will need to be validated. Users will receive a friendly modal error with the business validations. Example: Please fill your email correctly, etc. Please consider that large pages need to be paginated. Expected components There are lots of components that need to be written as a component, avoiding duplicate HTML elements. I guess that this template already follows this rule. Follow some recommendations: Car box element with this 3 attribute values and his icons Signin and Signup Box Review component (can be found on the vendor page) Authentication and Authorization Users will authenticate on a form login (with a Signin or a Signup capability). There is a secret configuration to make HTTP requests to an existing GraphQL Server, and we need to pass on the header. We cannot expose the secret on a client side. After the authentication, the application will store a local JWT to make all requests. Signin / Signup / Forgot Password Run a query and mutation for the sign in, signup, and forgot password. We don't need to authenticate with social networks at this time. Please consider helping us to create an OTP validation for this case. React / Next.js Template https://finder-react.createx.studio/car-finder Home https://finder-react.createx.studio/car-finder Job to be done: Dynamically load brands, models and locations Dynamically load countries at the bottom side Create some new graphql queries to improve the combos loading, based on the existing advertisements. Remove "new" and "used" tabs (Done) Dynamically load the car body categories and their SVGS icons (Done) Dynamically load the top offers (Done) Dynamically load the car brands and their icons (Done) Nothing to do on "What sets Finder apart" Latest cars component (Done) Remove the "Car sale in 24 hours" component Remove the "Get the top-rated app" component Dynamically load the "Latest news" component from a GraphQL endpoint. Add the user on the newsletter on the bottom side. Important: The data loaded on the combos needs to respect the advertisements on the database. Example: After choosing a Brand, only existing models for this selected brand with advertisements on the database will be loaded. This GraphQL query will need to be created. Search https://finder-react.createx.studio/car-finder/catalog?view=list Job to be done: seo aspects and url data pointing on the search please take a look at the most important part from this website is the "search module". This page needs to respect SEO rules, to filter data (even via post, or get). SEO rules needs to use these slug parameters: /{country}/{brand}/{model}/{vehicle-type} Good news: Database is already ready for this Additional filter rules passed by query string could be discussed along the project. We need to write a GraphQL query to receive all the filters to select the data Users will search advertisements based on the selected filters The advertisements will need to be refreshed in real time, based on the user filters choice All the filters are dynamic, so, we need to populate and re-populate based on the selected data and mainly, respecting the available advertisements. Example: If the user chooses a specific color, all the data on the filter will need to be filtered again, respecting the advertisements. Users can sort by Newest, Popular, and Price (Low to High and high to low) We don't need the "comparison" feature. You can remove the "compare" button. On the bottom side, users can change the "location", which is a basic query change This page will need to be 100% dynamic, including categories, locations, body types, year, make and model, etc The information to write on the left box (filters) will need to bring from a GraphQL (categories and choices) We already have some written queries to help to populate date inside all the filters This page needs to dynamically change the URL base on the selected filters without refreshing-it. We don't have the queries written for the search, so, we need to write a new one Attributes and attribute values are 100% based on slugs. The combo "New York" on the bottom side will need to be loaded with dynamic data. There is an existing query to ask for all attribute values by an attribute name called "location" Navigation needs to be clean. For the search and navigation, we won't use IDS visible for the users. Only for internal needed purposes. This page needs to paginate the results. The desired behavior is the pagination using the scroller. Wishlist Job to be done: Note that above the image of the ads there is a "heart shaped icon". The click on this button needs to call a function to register this item as a desired item on this wishlist. If the user is not authenticated, the "login popup" will need to be displayed Users and add or remove the advertise from his wishlist Search SEO aspects Users can filter data using the "left box", only filtering, but some URL navigation needs to automatically apply filters. Follow the rules: Advertise Detail https://finder-react.createx.studio/car-finder/single Job to be done: This page needs to be 100% dynamic The access for an advertisement page won't pass IDS via querystring, only slugs. Load the car details (Brand, model, year and advertise attributes) Load the advertise specifications Load the price Load the rental car company details (logo, name and phone number) Contact the company through a message Register interest of this kind of advertise on the "email me box" Remove the box "Features" Load the "Rental Car company description" Load the component "You may be interested in" All the queries for this page is already done Load the Faq for this advertise Load the comments for this advertise Vendor Profile https://finder-react.createx.studio/car-finder/vendor Job to be done: Basic page with dynamic data, loading all the vendor information, and his advertisements with the possibility to send a message. Queries and mutations are done for this page Reviews loading Reviews add only by authenticated users Account Info https://finder-react.createx.studio/car-finder/account-info Job to be done: This page can be used from a "vendor" or a "visitor" This is an authenticated page for users who have logged in on the website Users can change their personal info or even Delete this account on the "Personal Info" tab. Users can change their avatars Users can change their passwords and see all "sessions" by an existing GraphQL query. My Cars (Needs to be displayed only for vendors) Wishlist - Display the user wishlists (Queries are done) Reviews - Display the reviews made by the logged user, and received reviews (Reviews about you and made by you). Queries are done. Notifications (We don't need this module for now) Help (We don't need this module for now) Signout (Run the query for the logout and clear the cookies) My Cars On this page, only vendors will read their fleet, by a running and existing query. Vendors will have the possibility to manage all the data of their advertises Complete list of all url of the templates Home https://finder-react.createx.studio/car-finder Search https://finder-react.createx.studio/car-finder/catalog?view=grid Advertise Detail https://finder-react.createx.studio/car-finder/single Personal Info https://finder-react.createx.studio/car-finder/account-info Account Security https://finder-react.createx.studio/car-finder/account-security My fleet (My cars) https://finder-react.createx.studio/car-finder/account-cars Wishlist https://finder-react.createx.studio/car-finder/account-wishlist Reviews https://finder-react.createx.studio/car-finder/account-reviews Signup ( Use the modal and this current page) - Needs to work via the modal as well https://finder-react.createx.studio/signup-dark Sign In (Use the modal and this current page) - Needs to work via the modal as well https://finder-react.createx.studio/signin-dark Fleet management (This page will have less properties) https://finder-react.createx.studio/car-finder/sell-car Vendor https://finder-react.createx.studio/car-finder/vendor About (Static page) https://finder-react.createx.studio/car-finder/about Contact Us https://finder-react.createx.studio/car-finder/contacts Just call for a GraphQL mutation Not Found https://finder-react.createx.studio/car-finder/404-not-found Currently dynamic attributes for advertises (note that all are dynamic), and correlated with the advertisements Airport Delivery (Yes or no) American specs (Yes or no) Bags (Yes or no) Branch Pick-up (Yes or no) Brand (List) Car Features (List) Color (List) Delivery to You (Yes or no) Doors (1, 2, 3 or 4) Engine Capacity (List) Euro specs (Yes or no) Free Delivery (Yes or no) Fuel Type (List) GCC Specs (Yes or no) Insurance Included (Yes or no) International Specs (Yes or no) Languages Spoken (List) Mileages (List) Minimum Days (List) Minimum Required Age (List) Model (List) Model Year (List) Open Now (Yes or no) Payment Mode (List) Prices (List) Rental Period (List) Seats (List) Timesheets (List) Transmission (List) Vat (List) Vehicle Type (List)

Category IT & Programming
Subcategory Web development
What is the scope of the project? Medium-sized change
Is this a project or a position? Project
I currently have I have specifications
Required availability As needed
API Integrations Other (Other APIs)
Roles needed Developer

Delivery term: February 01, 2023

Skills needed