URL: https://joseph-thomas-postlight-challenge.netlify.com/employees
- Frontend: Typescript, React, deployed to Netlify
- Backend: GraphQL via Prisma, hosted on Prisma for production, or served locally with Docker.
Run yarn setup
to initialize a docker Postgres container and initialize all of the Prisma config.
Run yarn dev
to work locally. Or, in separate terminals, yarn dev:app
and yarn dev:server
👉 When browsing, type /sudo
to enter Boss Mode
I had not used Prisma before, and used this as an opportunity to give it a try. I enjoyed it, didn't have too many problems, and look forward to using it in the future. That's about it for the backend.
For the frontend:
- I used
xstyled
for the theme. I typically usestyled-components
, but had not explored xstyled yet. The theme itself isn't that great, but it was great to work with and allows for an easy way to switch themes. - Otherwise, I wanted to focus on building something that was very modular. The components that make up the Lists go into this.
I ended up spending a little more than 8 hours on this - probably closer to 10 or 11. I wanted to wrap up a couple features, and, of course, there were a handful of deployment / environment bugs to work out at the end. It's not as complete as I was hoping it would be, but I didn't want to go overboard on time spent. If I were to spend more time on this, my next steps would be:
- Add detailed views for the Employees, Departments, and Offices. These would, of course, be crucial to an actual app like this. I was more interested first in setting up the "directory" pages in a modular way and adding some CRUD functionality. So, please consider this as the first steps in a larger project instead of a "complete" app.
- Write more tests. (Right now, only the List's sorting feature is tested)
- Create a general-purpose component for adding entities. Right now, the 'NewThingForm' components are not very DRY. When working, I tend to write "WET" components so I can better explore the edge cases before tightening things up.
- Add Searching & Pagination to the lists
- Add a11y attributes
Two bugs you may come across:
- If you have an empty list of items, the list will not auto-update after you add the first entry. (Once the list is populated, new entries will appear as you add them)
- I didn't do any error handling for the mutations. Most of the time, you won't have any issues - but, if you try to add an item that causes an error, it fails silently. While goofing around, the only time I saw this was when adding a new Department with a name that already exists.