Devlogger

• 

  Home

• 

  README Editor

Inspiration

During hackathons, participants often spend nearly all their time building the actual project, leaving only a few minutes before the deadline to write documentation. Beginner developers frequently struggle to present their work effectively or highlight what they learned, which negatively impacts their presentation and growth scores. DevLogs was created to streamline this process, allowing developers to generate a structured, professional README and Devpost submission as they build.

What it does

DevLogs is a lightweight web application that acts as an interactive project journal. Users enter basic information about their application, including the problem statement, key features, technical obstacles, and learnings. As the user types, the application formats the input into standardized Markdown in real time, complete with local storage auto-saving and a one-click copy function for GitHub and Devpost.

How we built it

The project was built using Next.js 14 with the App Router, TypeScript, and Tailwind CSS. State management is handled through React hooks (useState and useEffect) linked directly to the browser's localStorage API to ensure data persists across browser refreshes. Framer Motion was integrated for clean layout transitions between the editing form and the live Markdown preview.

Challenges we ran into

One of the main challenges was dynamically formatting unstructured user text into clean, multi-line Markdown strings without breaking rendering rules. Handling local storage sync safely within Next.js client components without causing hydration mismatches between the server and client renders also required careful implementation.

Accomplishments that we're proud of

We are proud of creating a functional, highly responsive tool with zero bloat or backend dependencies. The application achieves its purpose cleanly, providing real utility for student developers without unnecessary visual distractions or complex setup requirements.

What we learned

Through building DevLogs, we gained practical experience in:

• Managing complex form states and string manipulation in React with TypeScript
• Safely persisting state across browser reloads using the Web Storage API
• Constructing clean, accessible, two-column layouts using Tailwind CSS grid utilities
• Structuring standard Markdown layouts programmatically

What's next for Devlogger

Future iterations of DevLogs will include custom README template selection (e.g., minimalist, comprehensive, or open-source focused), export capabilities to direct .md file downloads, and integrated tag generators for common software frameworks.

Built With

• css
• javascript
• markdown
• next.js
• typescript