Live -> https://archie-test-project.vercel.app/
Challenge project created to show the knowledge acquired as UI Developer in frontend technologies like react.js, graphql, apollo, typescript.
The initial structure is created by create-next-app, the setup for a modern web app with next.js.
Application requires Node.js to run.
Execute the follow commands.
git clone https://github.com/moguelor/archie-test-project.git
cd archie-test-project
yarn install
yarn dev
Note | The project is running on port
3000.
|-- packages # Different entities.
|-- configs # Configurations.
|-- apolloConfig.ts # Apollo configuration.
|-- shared # Reusable code.
|-- components # Reusable components.
|-- hocs # Reusable high order functions.
|-- hooks # Reusable hooks.
|-- querys.ts # Graphql queries.
|-- types.ts # Typescript types.
|-- pages # Main code.
|-- _app.js # Application component.
|-- index.tsx # Application entry point.
Here are the main libraries used in the project.
- react - Modern web library to use in the UI.
- next + typescript - The react framework for production and server side settings.
- chakra-ui - Create accessible React apps with speed.
- apollo - Client for react to connect graphql.
- react-spring - Spring-physics based animation library.
- vercel - vercel combines the best developer experience with an obsessive focus on end-user performance.
- Should a be NextJs project, using create-next-app is totally perfect
- Should use typescript
- Preferably use chakra ui for styled components.
- Add a search bar that can filter through missions and only display the ones that match the current search entry.
- Use one of the server-side functions NextJS provides to fetch data, if not explain why not.
- Use apollo graphql to establish connection to endpoint
- Make it mobile responsive.
- Added animations with the library
react-spring. - Used github boards to manage the task. You can see them HERE;