My Approach | Instructions | Technologies | Features | Preview
Dashboard for event organisers to view race startlist entries and ticket sale revenue.
I started the exercise with a bit of planning on Miro. Considering that there was a 5hr time limit, it made sense to plan everything out as much as I could to save time as a result. What I found to be the most helpful was mocking up the "finished product" to help me envision what I want to work towards.
My biggest challenge was keeping it small scale and simple. I tried my best to not overthink the problem.
Given that the exercise revolved around the data given, the main functionality to implement had to do with data manipulation, e.g. sorting & filtering. Of course, ticket revenue was in my plans as well. As for an additional feature I could implement, I decided on PDF printing as something essential for an event organiser.
I decided to go for Create-React-App with TypeScript as there was no need for a server & setup was pretty straightforward.
My next step was getting API data to display on the page. From that point on I kept adding functionality and expanding on it. I started with sorting, then moved on to filtering, stats and finally, printing.
I am new to Typescript so it was a great opportunity to learn more about it, even though it did slow me down. Creating type interfaces was something I've never done before.
Printing in react was a new experience as well but it was a breeze thanks to ReactToPrint package.
Overall, this was a fun experience and I wish I didn't have the time limit as it went by too fast. I feel like I could have done a much better job at refactoring and keeping it DRY. I might have decided to implement too much of the functionality that made me rush through it. However, I set a goal for myself and I'm happy I have more or less reached it within the time given.
Testing is the weakest point of this project. In fact, I'm embarassed of how bad of a job I've done. I would blame time constraints, but I should have prioritized better. I have tested API calls & basic component rendering but there is more to be desired, no doubt.
I have learnt a lot through this tech test and, inevitably, made a lot of mistakes. The biggest challenge was time, which constrained me on all fronts. There is a lot I could improve on, as well as new features to implement.
- More extensive component testing
- Cypress e-to-e testing
- Using ids rather than titles for filtering
- Search function
- Organiser authorization for sensitive data security
- User-friendly interface
- Clone the repository &
cd
into it npm install
to install dependenciesnpm start
to run a development server- Visit
localhost:3000
& you are good to go!
npm test
to test the applicationnpm lint
to run ESLint
- Node.js | Back-end JavaScript runtime environment
- React | Front-end JavaScript library for building user interfaces
- TypeScript | Typed superset of JavaScript
- Jest | Back-end unit testing
- React Testing Library | React DOM testing utilities
- Axios | Http client
- ESLint | Linting utility
- Moment | Date formatting
- ReactToPrint | Printing react components
- Entries
- Minimal view
- Detailed view
- Filtering
- By organiser
- By event
- Reset option
- Sorting
- By each of the entries' properties (x11)
- Ascending & descending order
- Reset option
- PDF Printing
- Stats
- Total ticket revenue
- Total tickets
- Average ticket price per entry