👉 Jump to a Section: Project Description || Schedule || Updates || Live Streams || Tasks || Designs and Deliverables

Project Description

In Made with Xata, I’m building an application in public that showcases projects Made with Xata. This includes a frontend gallery with details, user authentication, and an administrative interface for managing featured projects.

💡 Examples:

🔗 Quick Links:

Project on GitHub
Hosted on Vercel (Last deployed May 16, 2023)

⏰ Schedule

Week 1	✅ Design the Application
Week 2	Frontend Complete
Week 3	Connect the Backend
Week 4	Finish the Application

💬 Updates

June 24, 2023

<aside> 💎 Tweet sent 10:00pm June 24, 2023

https://twitter.com/selfteachme/status/1672801874326478848?s=20

</aside>

June 23, 2023

<aside> <img src="https://s3-us-west-2.amazonaws.com/secure.notion-static.com/50980220-ecc2-4ead-b791-80f4782ed5c7/twitter.png" alt="https://s3-us-west-2.amazonaws.com/secure.notion-static.com/50980220-ecc2-4ead-b791-80f4782ed5c7/twitter.png" width="40px" /> Tweet sent 10:00pm June 23, 2023

https://twitter.com/selfteachme/status/1672439482551771136?s=20

</aside>

April 7, 2023

<aside> <img src="https://s3-us-west-2.amazonaws.com/secure.notion-static.com/8475cbd1-fd34-4779-9648-04a9ee4b61f1/twitch.png" alt="https://s3-us-west-2.amazonaws.com/secure.notion-static.com/8475cbd1-fd34-4779-9648-04a9ee4b61f1/twitch.png" width="40px" /> Building the Add and Edit Form functionality with Xata - Watch

</aside>

April 5, 2023

</aside>

April 3, 2023

CleanShot 2023-05-15 at 22.44.29@2x.png

</aside>

March 30, 2023

</aside>

March 29, 2023

<aside> <img src="https://s3-us-west-2.amazonaws.com/secure.notion-static.com/0c8bf909-4f70-410d-b6a6-6f60d59a59e9/twitch.png" alt="https://s3-us-west-2.amazonaws.com/secure.notion-static.com/0c8bf909-4f70-410d-b6a6-6f60d59a59e9/twitch.png" width="40px" /> Building the Add and Edit Form functionality with Xata - Watch

</aside>

March 28, 2023

<aside> <img src="https://s3-us-west-2.amazonaws.com/secure.notion-static.com/f699ff76-2a7b-434c-9af9-88c5ce46d084/twitch.png" alt="https://s3-us-west-2.amazonaws.com/secure.notion-static.com/f699ff76-2a7b-434c-9af9-88c5ce46d084/twitch.png" width="40px" /> Connecting the Backend to Xata - Watch

CleanShot 2023-03-28 at 11.21.21@2x.png

Added additional fields to the database
Generated random content
Connected some of the frontend components to Xata </aside>

March 25, 2023

<aside> <img src="https://s3-us-west-2.amazonaws.com/secure.notion-static.com/e6df873f-912c-4c81-b331-876196c597e9/twitter.png" alt="https://s3-us-west-2.amazonaws.com/secure.notion-static.com/e6df873f-912c-4c81-b331-876196c597e9/twitter.png" width="40px" /> Tweet sent 8:06am March 25, 2023

https://twitter.com/selfteachme/status/1639614649925787650?s=61&t=Obt3_PIas352mxhm7fbBXQ

</aside>

March 24, 2023

<aside> <img src="https://s3-us-west-2.amazonaws.com/secure.notion-static.com/612b9142-2196-474d-88fc-5a6958aaec1b/hashnode.png" alt="https://s3-us-west-2.amazonaws.com/secure.notion-static.com/612b9142-2196-474d-88fc-5a6958aaec1b/hashnode.png" width="40px" /> Released blog post on Hashnode: Planning for Success: My Approach to Designing Applications

Planning for Success: My Approach to Designing Applications

</aside>

<aside> <img src="https://s3-us-west-2.amazonaws.com/secure.notion-static.com/6eef066b-c311-4ad1-99c2-86b2ca8dd0a0/twitch.png" alt="https://s3-us-west-2.amazonaws.com/secure.notion-static.com/6eef066b-c311-4ad1-99c2-86b2ca8dd0a0/twitch.png" width="40px" /> Testing Components in Jest and JavaScript Testing Library - Watch

CleanShot 2023-03-24 at 12.47.35@2x.png

Wrote tests for the Card Component
Gave an overview of Xata and some of the tooling within the VS Code Extension </aside>

March 23, 2023

<aside> <img src="https://s3-us-west-2.amazonaws.com/secure.notion-static.com/59cfb546-018f-4bf7-8b34-6c38c05ae99b/twitter.png" alt="https://s3-us-west-2.amazonaws.com/secure.notion-static.com/59cfb546-018f-4bf7-8b34-6c38c05ae99b/twitter.png" width="40px" /> Tweeted 1:23pm CST

https://twitter.com/selfteachme/status/1638970299202035712?s=20

</aside>

March 22, 2023

<aside> 💎 Wrapping up the Component Library

I’m almost finished with the component library.
Got the homepage slider working with some animation on hover
Built out the card component. The images all styled in CSS (rotated and clipped) so that when the images come from the backend, we can achieve the same effect

</aside>

<aside> <img src="https://s3-us-west-2.amazonaws.com/secure.notion-static.com/253a68ff-403d-4ee7-aa06-b88ebf7e39c0/twitch.png" alt="https://s3-us-west-2.amazonaws.com/secure.notion-static.com/253a68ff-403d-4ee7-aa06-b88ebf7e39c0/twitch.png" width="40px" /> Continued Building the Frontend Component in Next.js, Tailwind, Storybook, and Jest - Watch

CleanShot 2023-03-23 at 07.03.53@2x.png

Built variations of the video admin table, for approved and unnapproved projects
Built the admin header component and fixed some broken tests. </aside>

March 21, 2023

<aside> <img src="https://s3-us-west-2.amazonaws.com/secure.notion-static.com/9603cb7c-afd4-4276-a7c8-78b42340171b/twitter.png" alt="https://s3-us-west-2.amazonaws.com/secure.notion-static.com/9603cb7c-afd4-4276-a7c8-78b42340171b/twitter.png" width="40px" /> Tweeted 3:23 pm CST

https://twitter.com/selfteachme/status/1638275274251829248?s=20

</aside>

<aside> <img src="https://s3-us-west-2.amazonaws.com/secure.notion-static.com/3df5141d-db33-4efc-8136-bdfb90442bdd/twitch.png" alt="https://s3-us-west-2.amazonaws.com/secure.notion-static.com/3df5141d-db33-4efc-8136-bdfb90442bdd/twitch.png" width="40px" /> Wrote Frontend Tests - Watch

CleanShot 2023-03-21 at 10.17.30@2x.png

Wrote tests for the Header and Icon component
Discussed the benefits of constants replacing “magic strings” </aside>

March 20, 2023

<aside> <img src="https://s3-us-west-2.amazonaws.com/secure.notion-static.com/a976f221-3a9e-49e9-bd17-4610a5cf2272/figma.png" alt="https://s3-us-west-2.amazonaws.com/secure.notion-static.com/a976f221-3a9e-49e9-bd17-4610a5cf2272/figma.png" width="40px" /> Application design within Figma

</aside>

<aside> <img src="https://s3-us-west-2.amazonaws.com/secure.notion-static.com/eca70413-ca7d-4637-a7b5-0c6fefe930f0/GitHub-Mark.png" alt="https://s3-us-west-2.amazonaws.com/secure.notion-static.com/eca70413-ca7d-4637-a7b5-0c6fefe930f0/GitHub-Mark.png" width="40px" /> Set up the project (Next.js, Tailwind, Storybook, Jest, JavaScript Testing Library), created the GitHub Repository

</aside>

March 18, 2023

<aside> 🎨 Got the desktop version of the application in a good place.

</aside>

March 16, 2023

<aside> <img src="https://s3-us-west-2.amazonaws.com/secure.notion-static.com/f6ac89b0-24fc-43e9-b06e-7b3f94e77b4d/twitch.png" alt="https://s3-us-west-2.amazonaws.com/secure.notion-static.com/f6ac89b0-24fc-43e9-b06e-7b3f94e77b4d/twitch.png" width="40px" /> Continued designing the application - Watch

CleanShot 2023-03-21 at 08.33.15@2x.png

Finalized the administrative design
Started designing the individual gallery page </aside>

March 15, 2023

CleanShot 2023-03-21 at 08.32.48@2x.png

Started designing the submission form and administrative sections within Figma </aside>

March 14, 2023

CleanShot 2023-03-21 at 06.53.26@2x.png

Designed the UI Flow Diagram - this maps out the application and shows the flow of data throughout the application
Started planning the application within Figma </aside>

📹 Live Streams

Week 1

https://youtu.be/sxRD73NQjUg

Planning out the Application

March 14, 2023

https://youtu.be/VEbUqyhgLqc