Elizabeth Parnell’s Post

I didn't just build a project. I built something I actually use. 🛠️ DevBoard is a GitHub Profile Dashboard — search any developer and instantly see: 📊 Their contribution heatmap 🧩 Language breakdown across repos 📌 Pinned repositories ⭐ Top repos ranked by stars But the features aren't what I'm most proud of. It's what I had to figure out along the way: → GitHub's API rate limits hit fast. I had to handle errors gracefully so users never see a broken screen. → Dark mode isn't just aesthetic — it taught me how to architect CSS theming properly. Stack: React + CSS3 + GitHub REST API, deployed on Vercel. Every bug I fixed made me a better developer. Every feature I shipped gave me a new idea for the next one. If you're learning frontend — build real things. APIs, edge cases, deployment. That's where the growth happens. 🔗 Try it live: https://lnkd.in/gSHxayUm 🔗 GitHub: https://lnkd.in/gG5KPu4Z #React #FrontendDevelopment #JavaScript #GitHub #WebDev #BuildInPublic #OpenSource #100DaysOfCode

🚀 Built my portfolio — but this time, I focused on doing it right. Over the past few days, I built a full-stack portfolio website that doesn’t just showcase projects, but reflects real-world development practices. 🔹 What it includes: • Dynamic LeetCode stats (via backend API) • GitHub stats integration using REST API • Fully responsive UI • Clean, component-based architecture 🔹 Key features: • Responsive navbar with quick actions • Phone number & email copy on click • LinkedIn profile redirection • Resume download on click • Project showcase with Live Demo + GitHub links 🔹 What makes this different: Instead of relying on third-party services, I built my own backend to fetch and manage data. • Solved real-world CORS issues • Built a Node.js + Express backend • Used GraphQL API for LeetCode stats • Integrated GitHub REST API • Deployed backend on Render • Deployed frontend on Vercel 🔹 What I learned: Handling API restrictions, deployment challenges, and structuring a full-stack project — things you don’t usually get from basic tutorials. 🔗 Live: https://lnkd.in/g55U-mkj 💻 GitHub: https://lnkd.in/gBMaDMA2 Would love your feedback 🙌 #webdevelopment #reactjs #nodejs #fullstack #portfolio #javascript #developers

Debugging a React + TypeScript deployment was a rollercoaster today. Here is what I learned: Project Overview: Ajaia Docs is a modern, responsive documentation platform built with React, TypeScript, and Vite, designed with a clean UI and a scalable monorepo architecture where users can share and edit documents conveniently. I just finished submitting my latest project, Ajaia Docs (a documentation platform built with React, TypeScript, and Vite). Getting it to work locally was smooth, but pushing it to production was a completely different beast. I hit a wall with deployment, and it taught me some valuable lessons about real-world architecture: 1. Dev vs. Prod Environments: My app used a proxy to connect the frontend to a backend API on localhost:3001. I learned the hard way that static hosts (like Vercel/Netlify) don't run backend servers automatically! 2. Monorepo Structures: Having a /client and /server folder means your deployment platform needs exact instructions on where to look (Root Directory settings) and where to put the build. 3. TypeScript is strict for a reason: I spent an hour troubleshooting deployment errors, only to find a tiny type mismatch (user_id vs userId) in an API route. TS caught what would have been a silent runtime bug. Deployment isn't always just pushing a button. It requires understanding how your code is actually bundled and served to the browser. Huge shoutout to the dev community for the resources that helped me untangle this. Repo here: https://lnkd.in/guTYWCwr #ReactJS #TypeScript #Vite #WebDevelopment #SoftwareEngineering #100DaysOfCode #TechJourney

🚀 Tutorial hell is real — and I've been there. Watching endless "How to Code" videos, taking notes, feeling like I'm making progress... only to open a blank editor and freeze. The shift happened when I stopped consuming and started building. Every bug I fixed, every feature I shipped — that's where real learning lives. If you're stuck in tutorial purgatory, pick one small project and just start. Messy code beats no code every time. #LearnToCode #WebDevelopment #React #NodeJS #BuildInPublic

Announcing TypeScript 7.0 Beta Big update for developers: TypeScript just got a massive performance boost! The beta release of **** is here — and it’s not just an incremental upgrade. What’s new? - Up to 10x faster builds - Completely rebuilt compiler using Go - Same type-checking behavior → no learning curve - Parallel processing for faster large-scale projects Why it matters: Teams working on large codebases or monorepos can expect significantly reduced build times and a smoother dev experience — both in CLI and editors. Good news: It’s highly stable, compatible with TypeScript 6, and can even run side-by-side — making adoption easier. Bottom line: This is one of the most impactful upgrades in TypeScript’s history — focused on performance without breaking your workflow. Learn more https://lnkd.in/dhufMWJ3 #TypeScript #WebDevelopment #SoftwareEngineering #JavaScript #DeveloperTools #Programming #TechUpdates

TypeScript 7.0 Beta is here, and it’s built on a new native Go foundation! A few updates stood out: ✔️ Up to 10x faster performance than previous versions ✔️ Parallelized parsing, type-checking, and builds ✔️ Faster editor experience with the new Native Preview extension ✔️ Side-by-side support during migration from TS 6.0 This could be one of the most impactful TypeScript releases yet. 👇 https://lnkd.in/eJ4keuBq

Day 8 of #30DaysOfTypeScript How I structure a TypeScript project (real-world, not theory) One of the biggest mistakes I made early on? Dumping everything into random folders and calling it “architecture” 😅 A clean project structure isn’t about looking smart — it’s about scaling without pain. • Feature-based structure > file-type structure → Keep related logic together (not controllers in one folder, services in another) • Shared is truly shared → If it's used in only one module, it stays inside that module • Types live close to usage → Avoid a giant global types folder unless necessary • Separation of concerns → Controller = request/response → Service = business logic 🚀 Why this works: • Easy to scale • Easy to onboard new devs • Less confusion, more productivity • Cleaner imports If your project feels messy right now, don’t refactor everything at once. Start with one module. Then grow. Follow for Day 9 👀 (We’ll talk about a mistake that silently breaks TypeScript safety) #typescript #webdevelopment #nodejs #softwareengineering #cleanarchitecture #developers

I used to feel TypeScript setup was unnecessarily complicated… until I structured it the right way. Here’s a clean, scalable setup I now follow to write TypeScript efficiently (especially useful if you’re building real projects, not just demos): 🚀 1. Start clean Initialize your project: npm init -y 📁 2. Keep your project structure clean Avoid dumping everything in the root folder. Best practice: Create a src folder → all your TypeScript code goes here Keep root clean → only config files (package.json, tsconfig.json, etc.) This avoids chaos later when your project grows. ⚙️ 3. TypeScript configuration (don’t skip this) Generate config: tsc --init Update your tsconfig.json: { "rootDir": "./src", "outDir": "./dist" } src → your TS code dist → compiled JS output (production-ready) 🔄 4. Compile TypeScript → JavaScript tsc -p . This: Creates a dist folder Converts all TS files into JS 📦 5. Install TypeScript correctly Don’t install it globally in your project dependencies. Use: npm install typescript -D Why? Keeps production bundle clean TS is only needed during development 🔁 6. Automate compilation (game changer) Manually compiling every time is painful. Use: npm install tsc-watch -D Now update package.json: "scripts": { "dev": "tsc-watch --onSuccess \"node dist/index.js\"" } Run: npm run dev Now your workflow becomes: Save TS file → auto compile Compile success → auto run JS Errors → instantly visible 🚫 7. Don’t push unnecessary files Create .gitignore: node_modules dist You only push source code, not compiled output. 💡 Final Thought A clean setup is not just about structure — it directly impacts: Speed of development Debugging experience Scalability of your project Once this is in place, TypeScript stops feeling like overhead… and starts feeling like power. If you’re learning or transitioning into real-world development, get this foundation right early. It pays off. #TypeScript #WebDevelopment #NodeJS #CleanCode #DeveloperSetup

A few signals your frontend probably needs TypeScript. Not the usual “we should add TypeScript someday” discussion. The real breaking points. 1️⃣ Runtime errors that only appear in production A prop gets renamed but one component still uses the old name. Everything works in dev. Code review misses it. Users find it first. 2️⃣ Refactors nobody wants to touch A utility function is used in 30 components. You need to change its signature. Everyone thinks it will work. Nobody is confident enough to try. So the refactor never happens. 3️⃣ Components with mystery props “Does this component still accept that old prop?” Someone opens the file, scrolls through JSX, and guesses. Sometimes correctly. 4️⃣ Painful onboarding A new developer joins and spends their first week asking: “What arguments does this function expect?” Because the codebase doesn't tell them. These aren't really TypeScript problems. They're symptoms of a frontend that has grown beyond what people can safely keep in their heads. TypeScript doesn't magically fix architecture. But it does make these problems either disappear, or at least visible enough to fix early. I've seen teams reach this point more than once, and the migration conversation always starts the same way: “Why didn't we do this earlier?” And I am curious, which of these have you seen most often? #TypeScript #Frontend #JavaScript #WebDevelopment #SoftwareEngineering

Day 4 of 30 Days of TypeScript 🚀 Today’s topic: any vs unknown A lot of developers use any thinking it gives flexibility… But in reality, it removes the biggest advantage of TypeScript — type safety. Here’s the truth: 🔴 any Disables type checking Allows anything (even wrong code) Can lead to runtime bugs 🟢 unknown Forces you to validate data Keeps your code safe Encourages better patterns Example 👇 let data: unknown = "hello"; if (typeof data === "string") { console.log(data.toUpperCase()); // ✅ safe } 👉 Rule of thumb: If you don’t know the type yet, use unknown — not any. Because good developers don’t just make code work… They make it reliable. #TypeScript #WebDevelopment #JavaScript #Frontend #CleanCode #100DaysOfCode