**Space X Missions Visualizer **
Tech Stack
- Next.js - A framework for building server-rendered React applications
- GraphQL - A query language for your API
- TypeScript - A typed superset of JavaScript that compiles to plain JavaScript
- Tailwind CSS - A utility-first CSS framework
- GraphQL Code Generator - A tool that generates code from your GraphQL schema and operations
How to Run
- Clone the repository
- Install the dependencies with
yarnornpm i - Run the development server with
yarn devornpm run dev - Open http://localhost:3000 to view the application in the browser.
Showcase Video
Features
- List all the missions
- Search missions by mission name
- Compare two mission
- Infinite scroll pagination for missions
- Beautiful Splash screen while opening the website to capture the the first impression of visitors
What if I had more time?
- Create a theme for the app
- Make the app responsive
- Refactor and reorganize the code better
** I have designed the whole app. If the design files are provided beforehand to me, I would have been able to implement the UI faster. Being a frontend developer, I have tried my best to make the website presentable. I have also added some animations to make the website more interactive. ** With that if all the query-documents are provided for all the graphql calls, It would be faster to create the app
Please note that , I have not coded the ships details and search by rocket-name (search by mission name is added). We can talk more about this.
Contributing
Pull requests are welcome. For major changes, please open an issue first to discuss what you would like to change.
Please make sure to update the tests as appropriate.