When I started the project, the Prisma schema was the backbone of the project. It handled user authentication and data management while also preparing the groundwork for features I want to implement in the future. Prisma interacting with databases is straightforward, and its schema definition language lets me map out my data structure.
There are two main models:
1. User Model
This model stores all the information about users. Here’s what each field does:
id: Automatically generated, unique identifier for each user.
email: The user’s email, which has to be unique (a must for authentication).
name: The user’s name.
password: Stores the hashed password for authentication.
dateOfBirth, profilePicture, and bio: These fields were added for features I wanted to include later, like showing an astronomy picture based on the user’s birthday or letting users create a detailed profile.
role: Defaults to USER
createdAt: Tracks when the user was created.
2. Post Model
This model is for managing content.
id: Unique identifier for each post.
topic: The subject of the post.
detail: The content of the post.
userId: Links the post to the user who created it.
like: Tracks how many likes the post gets.
createdAt and updatedAt: Automatically record when the post was created and last updated.
The relationship between these models is key. A single user can have multiple posts, and the userId field in the Post model establishes that connection.
Challenges and Lessons Along the Way
When I started, I planned to include some cool features, like showing an astronomy picture on the user’s birthday using their date of birth.
However, I had to cancel this idea because I spent most of the time designing the UI to be beautiful to match my neat. 🤣
another reason is after running into too many errors and realizing I needed more experience with tools like Next.js and React. So just do what I can do for now (Just to submit this project in time)
Here’s what I learned:
Start Small: It’s tempting to go big, but focusing on core functionality first saves time and headaches.
Understand Your Tools: Prisma, Next.js, and React are powerful, but there’s a learning curve. Practice is key.
And another thing that I want to present.
Adding Dynamic News Updates
Another feature I built was a news feed that pulls articles dynamically from an API. Users can navigate through different sets of news articles by clicking “Next” and “Previous” buttons, which adjust the API request offset.
How It Works
The system uses React state to manage articles and an offset value. When the offset changes, a new request is sent to the API to fetch the next or previous batch of articles.
Here’s a quick look at the main logic:
Fetching Articles: The useEffect hook triggers a request whenever the offset state changes. Articles are fetched from the SpaceFlight News API and stored in the articles state.
Navigation Buttons: The “Next” button increases the offset by 10, while the “Previous” button decreases it, with a minimum value of 0.
Code Snippet for Fetching News
`useEffect(() => {
async function fetchNews() {
setLoading(true);
try {
const response = await fetch(`https://api.spaceflightnewsapi.net/v4/articles/?offset=${offset}`);
const data = await response.json();
setArticles(data.results);
} catch (error) {
console.error("Error fetching news:", error);
} finally {
setLoading(false);
}
}
fetchNews();
}, [offset]);
`
This project has been a great learning experience. It’s helped me understand how Prisma can simplify database management and how much more there is to learn about building apps with Next.js and React. Adding the news feed taught me about working with APIs and managing state dynamically. There’s still a long way to go, but I’m excited about what’s next!
Top comments (0)