One idea
A module is a JavaScript file with one clear job. Export what other files need, and import it where you use it.
Good project shape makes your code easier to read in a hackathon review. It also makes your README simpler.
Why shape matters
When all your code sits in one app.js file, every change feels risky. You scroll too much. You also mix UI, data fetching, and helper logic in one place.
A recruiter or judge may spend only a few minutes in your repo. Clear files help them see that you understand the code, not just the final screen.
Use simple folders
Do each one yourself, then tap it to tick it off. The ticks are only a checklist for you: they are not marked or scored.
0 of 5 done
Small project shape
For a project that shows public data, this shape is enough. Do not create extra folders just to look professional.
my-js-project/
index.html
README.md
src/
main.js
api.js
render.js
helpers.jsExport and import
Use named exports when a file has several useful functions. Use the exact exported name when importing.
// src/helpers.js
export function formatRupees(amount) {
return `₹${Number(amount).toFixed(0)}`;
}
export function isValidItem(item) {
return item && item.name && typeof item.price === 'number';
}
// src/render.js
import { formatRupees, isValidItem } from './helpers.js';
export function renderItems(items, container) {
container.innerHTML = '';
items.filter(isValidItem).forEach((item) => {
const row = document.createElement('p');
row.textContent = `${item.name}: ${formatRupees(item.price)}`;
container.appendChild(row);
});
}Connect in main
Your main.js should read like the story of the app. Get elements. Fetch data. Render it. Handle errors.
// src/api.js
export async function getProducts() {
const response = await fetch('https://fakestoreapi.com/products?limit=5');
if (!response.ok) {
throw new Error('Could not load products');
}
return response.json();
}
// src/main.js
import { getProducts } from './api.js';
import { renderItems } from './render.js';
const app = document.querySelector('#app');
async function startApp() {
try {
const products = await getProducts();
const items = products.map((product) => ({
name: product.title,
price: product.price * 83
}));
renderItems(items, app);
} catch (error) {
app.textContent = error.message;
}
}
startApp();Common module mistake
If you use import in the browser, your script tag must use type="module". Without it, the browser will not understand import and export.
Also include the .js extension in local imports, like './api.js'. This avoids path errors when running directly in the browser.
<script type="module" src="./src/main.js"></script>Use AI carefully
You can ask AI to suggest a project structure. Then check if every file has a real job and if the imports match the exports.
Reject structures with too many folders for a small hackathon app. Simple and readable beats fancy.
Prompt:
I have a small browser JavaScript app that fetches data and renders a list.
Suggest a simple file structure using modules.
Keep it beginner-friendly and explain what each file does.Do this now
Do each one yourself, then tap it to tick it off. The ticks are only a checklist for you: they are not marked or scored.
0 of 5 done