HTML-to-Astro
I have created a repo on Github to accommodate the site. Still waiting for final confirmation from the client.
Selfhosting Serverless Cron
Project Link:
API Documentation:
It's a bad idea to start a project on the holidays. I barely had time to work on this during the past few days. Today, I spent some time on the front end, too. The front end is my design space, so I can get a full sense of what I'm building
Today is the first day of this two-week challenge. I've added some basic styles for the pages and decided on the page structures.
Only got to push a bit of progress over the weekend, due to work.
I will try to make more progress today
I finished the frontend code (for desktop)!!
Some of the remaining sections were a little tricky, trying to get the spacing just right.
I felt like I used a lot of absolute
positioning -- which might make the responsive views a little more challenging.
I also made all the DNS Updates
- pointing to the appropriate host (SSL included)
- set up Gmail
- set up domain to send out via ConvertKit
👉 https://www.figmafordevs.com/
Remaining Pieces (before 3/14)
- Copy pass
- Responsive
- Swap out pricing table for an interest form. I'm not planning on pre-selling. I'd rather finish the course and sell once it's complete.
I made quite a bit of progress this evening....finally! 😅
Got the frontend styling done for several sections:
The lessons section was a little challenging because I wanted the line between the lesson number and the lesson name to be centered. I started trying to implement it with CSS Flexbox, but finally got it working with CSS Grid.
This is my favorite quote on the whole site (I gave myself a testimonial. 🤪)
Speaking of testimonials:
This section was a little tricky because I wanted to use a masonry grid. But, it doesn't have great browser support yet:
The trick was to use columns
:
.testimonial-grid {
column-gap: 20px 20px;
@apply columns-4 mx-5
}
I've only done styling for the desktop view, haven't even started on responsive styling.
My plan is to wrap up the landing page styles tomorrow 🤞
I hotwired the Frequently Asked Questions section.
Each FAQ is set up as a separate markdown file. Then, I'm using Astro's Content Collections to dynamically import and display the content.
- Made some slight adjustments to my data by removing drivers who have never had a teammate and by merging certain constructor entries and thus eliminating redundant links between some drivers
- Decided to roll with an Astro project instead of Nuxt that's going to use Vis.js to visualise all my node graphs
Catching up as I somehow missed we can post updates!
So far I've:
- Created a basic figma wireframe
- Setup my nextjs app with basic styling
- Attempted to use iOS shortcuts as a way to easily share images from mobile
Next I need to create my backend.
Made small progress. Got the footer styled.
I love the fact that you can now use nested styles with Tailwind.
Currently did a high-level breakdown of the project, and I'm thinking of using the following:
Docker compose to run the entire deployed stack
- Node.js mailserver
- MongoDB database
- React.js user inbox/config panel
The following restrictions:
- Max inbox size of 50MB
- Rate limit: 20 emails per minute
- Rate limit: 500 emails per day
- Retention: 7 days
I wasn't able to make as much progress today as I'd hoped. I did a little bit on the header
component and exported out a few assets.
Today was a super busy day IRL, so I took it easy and settled on the obligatory graph display features I'd like to ship. These are:
- Teammates of a specific driver
- Drivers who were teammates in a specific team
- The shortest path between two drivers
- All the possible paths between two drivers
- Yolo it and display the entire graph with 858 nodes and 5337 links between them
Rough drafts of steps 1 - 9 written over the course of the weekend (3/1 - 3/3)
Created the UI for the login/register pages
- I've managed to set up Neo4j Community Edition database, install the official desktop app, and connect it to the DBMS.
- I've imported all the necessary driver and team data, and of course defined relations between drivers and teams.
- I've learned the basics of the Cypher query language used by Neo4j and built a couple of queries for some of my app's planned features
I stubbed out each of the page sections into Astro components and got my custom Tailwind Config setup with the site’s color palette and typography.
I got started a couple days late, but I've laid out a plan of when I will be working on my project. I'll be spending today getting caught up on where I left off, do a little planning and be ready to start coding on it tomorrow.
- Created the repository
- Read the Redwood.js documentation
- Scaffolded a redwood.js project using JavaScript instead of TypeScript.
Today was a great first day! I completed the following:
- Setup my nextjs project
- Setup my github repository
- Created a very basic coming soon landing page
- Deployed to Vercel and linked the devkits.me domain
I've found a MySQL database that contains all the driver info I need in my app, and I've managed to build a query for obtaining drivers and their teammates, whose results I've exported to a CSV file I can later use to model all the driver nodes and define relations between them in my Neo4j database.
Researched if a persistent player would be possible with Astro and it looks like it is, found this demo repo to use as inspiration.
Cloned the repository and updated the dependencies. Planned out some next steps of work.
Design is done-ish ... Could still do some work on:
- legal pages
- thank you page
- interstitial pages
Set up the GitHub Repo. Since this is really a static site, with little to no state, I'm building it on Astro.