Project: Loving Gracious Strings
Attempting to code a personal website in 3 days with Replit + ChatGPT
Project Commentary
Loving Gracious Strings: This was a 3 day project trying to build a personal website using Replit with ChatGPT assist. Battle was lost at 16 Jan 18:08 2023.
Not so loving after all...
Stack: HTML, TailwindCSS, React JS | Tools: ChatGPT, Google, Youtube
Backstory:
After the Revue disaster, I am here to stay on substack! If you’d like to stay in touch or follow such projects and brainstorms, I’ll recommend subscribing:
PS: To stay in extra touch, connect with me on Twitter @pranavdotexe.
What Transpired?
The first difficulty I came across was wrapping of HTML code for JSX. After some trial and errors was able to wrap an HTML code into divs, but I don’t think I did it more efficiently or got the entire logic about it. To make sense of the wrapping, I had to Google rather than ask GPT.
Above all of this I don’t know the structure of how a webapp should be built as in the compenents I need to create, shall I just put all of the code in the App.js or create separate components. I will have to carefully frame a question to get an accurate answer on this from GPT. Lets try!
GPT help with creating components quite well. I mkdir’ed a directory to store all the components and then added a jsx file called Navbar. I got the Navbar code entirely from GPT and then GPT also told me how to import this navbar component in App.jsx. One mistake that GPT did here was that it directed me to create .js files instead of .jsx, which in replit shows an error – but with certain compiler wouldn’t.
GPT has proved good for understanding a bit technicalities of the language, like what are the arrow functions used (understood that they are defined with
constkeywords for creating anonymous functions wherethispointers are not applicable). For regular functions, I can usethisto refer to the object of that function name.thisreferred outside of aconstkeyword gives me global parameters. To recap:
Anonymous Function:
const anonFunc = () => {}Regular Function:
function funcName() {}
A while back I had asked GPT the structure of any react webapp, it gave me a 5 point summary. Now after spending a few hours with replit, here’s my breakdown of the structure:
Store for all HTML components: A separate components folder with all individual replicable components.
A file where all components are rendered with js logic: Typically App.jsx
A file that imports react based functionalities, extrenal styling, and middleware: Typically Index.jsx
All the above ones are in src. Apart from this, a separate folder for images and icons. A Readme. And then packager files that are generally created after running console commands like create-react-app.
The next step is to get the tailwind into this project. I’ll probably need some google help in this as well as some GPT answers are not helping.
Okay awesome! I managed to install tailwind with my replit project. I had to use combination of tailwind docs and GPT to figure this out. Though it was pretty simple, steps below:
npm install tailwindcssnpx tailwindcss initcontent: ["./src/**/*.{html,js}"]For configuration of template paths. The best part of this command was that when I asked GPT what this means, it explained me each component from how * is a wildcard – double asterisks here for directories, and the parenthesis mention the file extensions where I need tailwind to be applied.Next, in App.css I put the following directives. I would be using App.css as the css input.
@tailwind base; @tailwind components; @tailwind utilities;
And then finally,
npx tailwindcss -i ./src/input.css -o ./dist/output.css --watch.Now I have to use the following header for all my component files
<head><link href="/dist/output.css" rel="stylesheet" /></head>
Our next step is to create a figma design of what exactly I want the website to look like. Will user lorem ipsum content for now and then later on at the very end can do the copyrighting.
Okay, the basic figma design is ready but there’s a big blocker ahead because I am not able to do some basic html logic that allows me the build something like a navbar. When it comes to toggling the bar where the menu falls down, is a JS task. Here I juggling on three front html-css-js and try to fight them with gpt-google-youtube. Its achievable but probably not too efficient! It would be more efficient and fun tackling these fronts one at a time. At this time 3days I think aren’t enough at all even with all the AI and Search tools with me. I could imagine someone with atleast html and basic js knowledge could have easily pulled this off.
As a next step, I’ll mark this first battle as a failure and instead gear up for the war ahead. Let’s fight and win the html front first!
The output:
All I managed to do was a setup, structure the project, integrate tailwind, and then start with the Navbar. Here’s the repl:
https://lovinggraciousstrings.pranavmandhare.repl.co/#
Discussion with ChatGPT
Subscribe Subscribe:
To follow the future battles — as in exploring problems and building solutions — subscribe via the CTA below. Promise next time will be a success story.