Challenge Project.

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.

Started Kit

The initial structure is created by create-next-app, the setup for a modern web app with next.js.

Installation

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.

Structure Folder

|-- 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.

Libraries

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.

Deploy

• vercel - vercel combines the best developer experience with an obsessive focus on end-user performance.

Graphql API

• SpaceX

Required features.

• Should a be NextJs project, using create-next-app is totally perfect
• Should use typescript

Extra points.

• 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.

BONUS

• Added animations with the library react-spring.
• Used github boards to manage the task. You can see them HERE;

[TODO]

• Add unit testings with Jest
• Generate a library component with Storybook for reusable components.
• Add mobile gestures with Hammer