Welcome to Yale Journals! Below is a breakdown of the project and its structure. This README will be updated with resources and reflect any changes to the tech stack and/or project structure.
- Next.js
- Node.js / Node Package Manager (npm)
- TypeScript
- Tailwind CSS
- Firebase
This is a very rough outline of the current project structure.
All assets (ie. images, icons, etc) are located under public/assets
- We will organize this folder as the website grows in complexity All frontend code is located under src/app and src/components src/app contains frontend code for the different pages
- Each page has its own folder which contains a page.tsx file; all files for any given page should be in the page's corresponding folder under src/app
- For example, the frontend code for the home page is under src/app/home/page.tsx src/components contains frontend code for reuseable components that can be used between pages
- For example, the Header component is used in multiple pages
- It is also used to modularize and organize the code and improve readability globals.css, layout.tsx, and page.tsx should NOT be changed
All backend code is located under src/backend. The majority of the code in the backend folder should be for scraping.
- There is currently a backend.json file that contains metadata for placeholder articles
- This is for testing purposes only; we will be using Firebase to store this data as well as handle authentication and cloud storage
package.json and package-lock.json are for Node.js package
- These files should not be modified unless you are manually debugging dependency errors
- postcss.config.js and tailwind.config.js are for Tailwind
- You can modify these files if you want to customize the functionality of Tailwind
- All other files/directories should not be modified
These are just some resources to aid in the development process.
- https://www.youtube.com/watch?v=pfaSUYaSgRo&t=164s&pp=ygUMdGFpbHdpbmQgY3Nz
- https://www.youtube.com/watch?v=DenUCuq4G04&pp=ygUMdGFpbHdpbmQgY3Nz
- This is the icon pack we will be using: https://tabler.io/icons
- https://nextjs.org/docs/pages/api-reference/components/link
- https://nextjs.org/docs/app/api-reference/functions/use-router
- https://firebase.google.com/docs/hosting/frameworks/nextjs
- https://www.youtube.com/watch?v=Vv_Oi7zPPTw&t=750s
- https://www.youtube.com/watch?v=-yrnWnN0g9o
- Each page should have the header and footer components as well as similar layouts, animations, fonts, and general structure.
- When styling with Tailwind, the className attribute can get pretty long and messy. This is how it is organized throughout the project:
- [flex or grid] [flex-col/flex-row or grid-rows/grid-cols] [width] [height] [margin] [padding] [colors] [everything else...] [animations using hover:] [animation duration]
- Example: className="flex flex-row h-14 w-7/12 mx-9 p-5 bg-[#C8E1F1] items-center rounded-full hover:h-[3.3rem] hover:w-[57%] hover:bg-[#b2c8d5] duration-200"