AWS Amplify Fullstack TypeScript Challenge Submission

This is a submission for the The AWS Amplify Fullstack TypeScript Challenge

What I Built

My app is a demo of a fictional company called ChargeNG. They provide monitoring of the British electricity grid to consumers so that they can check supply and demand, both currently and historically, to make decisions on when and where to charge their EV.

Demo

ChargeNG Demo
(You'll need to register with an email address in order to access the app content. Don't worry, I'll remove all user accounts regularly!)

Journey

I use Amplify Gen 1 in my day job, so having a good reason to try out Gen 2 was too good an opportunity to pass on!

I already use an AWS tech stack in my day job, so I already knew that I wanted to incorporate Cognito, AppSync, DynamoDB and S3. The Gen 2 Amplify documentation was really clear and, much like with the Gen 1 documentation, I got up and running with Gen 2 quickly. Of course there are some gotchas that need to be addressed by AWS:

• If we're going to be allowed to define our Cognito service in code, then Cognito needs to support updating the user pool from code. I ran into build errors that required me to delete the app and start over.
• It would be awesome if Amplify Data could support single-table design in . Our production data model would require at least half a dozen tables with the current Gen 2 implementation, which would create a big headache for integration and maintenance.
• The list() method really shouldn't default to a DynamoDB scan for obvious reasons. Our production data contains DynamoDB items partitioned by area (i.e. "MeasurementByArea#< Area ID >"), so I'd like to be able to supply the partition key (and optionally the sort key) when I call the list() method, switching it to query mode.

The app itself uses Tanstack Query to manage client-side data, with the Amplify Data operations contained in a utilities file ("utils/crud.js"). The charting feature is implemented using Recharts.

Overall, it's great that I can now do in code what used to be a PITA to do in configuration and direct in the generated service. The next step for me is to start making a lot of noise in AWS' direction to get the above issues resolved, so I can make plans to use Amplify Gen 2 in our product web application.

Connected Components and/or Feature Full

The UI is built with Next.js 14, the Amplify UI library and uses the Authenticator connected component to implement the UI for user management.

The project uses the following Amplify categories:

• Auth
• Data
• Storage