Skip to content
This repository was archived by the owner on Sep 10, 2025. It is now read-only.

Commit 3a75845

Browse files
openrocketsofficialopenrocketsofficial
committed
updated
1 parent c0b5b5b commit 3a75845

File tree

4 files changed

+150
-77
lines changed

4 files changed

+150
-77
lines changed

‎body.txt‎

Lines changed: 64 additions & 75 deletions
Original file line numberDiff line numberDiff line change
@@ -1,92 +1,81 @@
11

2-
This document addresses a common issue developers encounter when retrieving and displaying a list of posts from Firebase Firestore: correctly ordering posts by their creation timestamp to show the most recent posts first. Incorrectly handling timestamps can lead to posts appearing out of chronological order, a frustrating user experience.
3-
4-
**Description of the Error:**
5-
6-
When querying Firestore for posts, developers often fail to explicitly specify the ordering of the results using the `orderBy()` method. This results in the data being returned in an arbitrary, non-deterministic order, meaning the displayed posts may not be in chronological order. Even with `orderBy()`, incorrect timestamp field types or formats can cause ordering problems.
7-
8-
9-
**Code: Step-by-Step Fix**
10-
11-
Let's assume you have a collection named `posts` with documents containing a timestamp field named `createdAt`.
12-
13-
**1. Setting up the Timestamp:**
14-
15-
Ensure your `createdAt` field is correctly typed as a Firestore Timestamp. This is crucial for accurate ordering. When adding a new post, use `firebase.firestore.FieldValue.serverTimestamp()` to automatically generate a server-side timestamp, preventing inconsistencies.
16-
17-
```javascript
18-
import { addDoc, collection, serverTimestamp } from "firebase/firestore";
19-
import { db } from "./firebase"; // Your Firebase configuration
20-
21-
async function addPost(postData) {
22-
const postRef = collection(db, "posts");
23-
await addDoc(postRef, {
24-
...postData,
25-
createdAt: serverTimestamp(),
26-
});
27-
}
2+
This challenge focuses on creating a visually appealing card with a subtle 3D-like hover effect using Tailwind CSS. The effect will involve a slight shadow change and a small scale transformation on hover. This is a beginner to intermediate level challenge, perfect for practicing Tailwind's utility classes and understanding CSS transitions.
3+
4+
5+
## Description of the Styling
6+
7+
The card will be a simple rectangle containing some text. The base styling will be clean and minimalist. On hover, the card will subtly lift using a box-shadow adjustment and slightly increase in size. The transition will be smooth and natural, enhancing the 3D illusion.
8+
9+
10+
## Full Code
11+
12+
```html
13+
<!DOCTYPE html>
14+
<html>
15+
<head>
16+
<meta charset="UTF-8">
17+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
18+
<title>3D Card Hover Effect</title>
19+
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/tailwind.min.css" rel="stylesheet">
20+
</head>
21+
<body class="bg-gray-100">
22+
23+
<div class="container mx-auto p-8">
24+
<div class="max-w-sm bg-white rounded-lg shadow-md overflow-hidden md:max-w-lg">
25+
<div class="px-6 py-4">
26+
<div class="font-bold text-xl mb-2">Card Title</div>
27+
<p class="text-gray-700 text-base">
28+
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatibus quia, nulla! Maiores et perferendis eaque, exercitationem praesentium nihil.
29+
</p>
30+
</div>
31+
<div class="px-6 pt-4 pb-2">
32+
<span class="inline-block bg-gray-200 rounded-full px-3 py-1 text-sm font-semibold text-gray-700 mr-2">#tailwind</span>
33+
<span class="inline-block bg-gray-200 rounded-full px-3 py-1 text-sm font-semibold text-gray-700 mr-2">#css</span>
34+
<span class="inline-block bg-gray-200 rounded-full px-3 py-1 text-sm font-semibold text-gray-700">#hover</span>
35+
</div>
36+
</div>
37+
</div>
38+
39+
40+
<script>
41+
//No Javascript needed for this example
42+
</script>
43+
44+
</body>
45+
</html>
2846
```
2947

30-
**2. Querying with `orderBy()`:**
31-
32-
To retrieve posts ordered by the `createdAt` field in descending order (newest first), use the `orderBy()` method with the `desc()` modifier:
48+
To see the effect, add the following CSS using the `<style>` tag or your preferred method within the `<head>`:
3349

34-
```javascript
35-
import { getDocs, collection, query, orderBy, where, limit } from "firebase/firestore";
36-
import { db } from "./firebase";
37-
38-
async function getRecentPosts(limitCount = 10) {
39-
const postsCollectionRef = collection(db, 'posts');
40-
const q = query(postsCollectionRef, orderBy("createdAt", "desc"), limit(limitCount)); // limit to the last 10 posts
41-
const querySnapshot = await getDocs(q);
42-
const posts = querySnapshot.docs.map(doc => ({id: doc.id, ...doc.data()}));
43-
return posts;
50+
```css
51+
.shadow-md:hover {
52+
transform: translateY(-5px) scale(1.02);
53+
box-shadow: 0 10px 20px rgba(0,0,0,0.2);
54+
transition: all 0.3s ease;
4455
}
4556
```
4657

47-
This code fetches the last `limitCount` posts ordered by `createdAt` in descending order. Adjust `limitCount` as needed. If you want to filter posts you could add a `where` clause. For example to only get posts where the author is "John Doe":
48-
49-
```javascript
50-
import { getDocs, collection, query, orderBy, where, limit } from "firebase/firestore";
51-
import { db } from "./firebase";
5258

53-
async function getRecentPostsByAuthor(author, limitCount = 10) {
54-
const postsCollectionRef = collection(db, 'posts');
55-
const q = query(postsCollectionRef, where("author", "==", author), orderBy("createdAt", "desc"), limit(limitCount)); // limit to the last 10 posts by author
56-
const querySnapshot = await getDocs(q);
57-
const posts = querySnapshot.docs.map(doc => ({id: doc.id, ...doc.data()}));
58-
return posts;
59-
}
60-
```
61-
62-
**3. Displaying the Posts:**
63-
64-
Once you have the `posts` array, iterate over it and render the posts in your UI. The order should now be correct.
65-
66-
```javascript
67-
// In your React component, for example:
68-
{getRecentPosts().then(posts => {
69-
return posts.map(post => (
70-
<div key={post.id}>
71-
<h3>{post.title}</h3>
72-
<p>{post.content}</p>
73-
<p>Created At: {post.createdAt.toDate().toLocaleString()}</p> {/* Convert Firestore Timestamp to Date */}
74-
</div>
75-
));
76-
})}
77-
```
7859

60+
## Explanation
7961

80-
**Explanation:**
62+
* **`container mx-auto p-8`**: Centers the card on the page and adds padding.
63+
* **`max-w-sm bg-white rounded-lg shadow-md overflow-hidden md:max-w-lg`**: Sets the card's maximum width, background color, rounded corners, shadow, and prevents content overflow. `md:max-w-lg` makes it wider on medium screens and up.
64+
* **`px-6 py-4`**: Adds padding to the card's content.
65+
* **`font-bold text-xl mb-2`**: Styles the card title.
66+
* **`text-gray-700 text-base`**: Styles the card's paragraph text.
67+
* **`inline-block bg-gray-200 rounded-full px-3 py-1 text-sm font-semibold text-gray-700 mr-2`**: Styles the tags.
68+
* **`transform: translateY(-5px) scale(1.02)`**: This is the core of the hover effect. `translateY(-5px)` moves the card slightly up, and `scale(1.02)` increases its size.
69+
* **`box-shadow: 0 10px 20px rgba(0,0,0,0.2)`**: Creates a more pronounced shadow on hover.
70+
* **`transition: all 0.3s ease;`**: Makes the transition smooth over 0.3 seconds using an ease timing function.
8171

82-
The key to solving this problem lies in understanding the `orderBy()` method in Firestore queries. By specifying the `createdAt` field and setting the order to descending (`"desc"`), we guarantee that the most recent posts appear first. Using `serverTimestamp()` ensures accurate, server-generated timestamps.
8372

8473

85-
**External References:**
74+
## Resources to Learn More
8675

87-
* [Firestore Query Documentation](https://firebase.google.com/docs/firestore/query-data/order-limit-data)
88-
* [Firestore Timestamps](https://firebase.google.com/docs/firestore/data-model#timestamps)
89-
* [Firebase JavaScript SDK](https://firebase.google.com/docs/web/setup)
76+
* **Tailwind CSS Documentation:** [https://tailwindcss.com/docs](https://tailwindcss.com/docs) (Excellent resource for learning Tailwind utility classes)
77+
* **CSS Transitions and Transforms:** [https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Transitions/Using_CSS_transitions](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Transitions/Using_CSS_transitions) and [https://developer.mozilla.org/en-US/docs/Web/CSS/transform](https://developer.mozilla.org/en-US/docs/Web/CSS/transform) (Learn the basics of CSS transitions and transformations)
78+
* **MDN Web Docs (General CSS):** [https://developer.mozilla.org/en-US/docs/Web/CSS](https://developer.mozilla.org/en-US/docs/Web/CSS) (A comprehensive resource for all things CSS)
9079

9180

9281
Copyrights (c) OpenRockets Open-source Network. Free to use, copy, share, edit or publish.

‎errors/javascript/css-challenge-3d-like-card-hover-effect-with-tailwind-css/README.md‎

Lines changed: 84 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,84 @@
1+
# 🐞 CSS Challenge: 3D-like Card Hover Effect with Tailwind CSS
2+
3+
4+
This challenge focuses on creating a visually appealing card with a subtle 3D-like hover effect using Tailwind CSS. The effect will involve a slight shadow change and a small scale transformation on hover. This is a beginner to intermediate level challenge, perfect for practicing Tailwind's utility classes and understanding CSS transitions.
5+
6+
7+
## Description of the Styling
8+
9+
The card will be a simple rectangle containing some text. The base styling will be clean and minimalist. On hover, the card will subtly lift using a box-shadow adjustment and slightly increase in size. The transition will be smooth and natural, enhancing the 3D illusion.
10+
11+
12+
## Full Code
13+
14+
```html
15+
<!DOCTYPE html>
16+
<html>
17+
<head>
18+
<meta charset="UTF-8">
19+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
20+
<title>3D Card Hover Effect</title>
21+
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/tailwind.min.css" rel="stylesheet">
22+
</head>
23+
<body class="bg-gray-100">
24+
25+
<div class="container mx-auto p-8">
26+
<div class="max-w-sm bg-white rounded-lg shadow-md overflow-hidden md:max-w-lg">
27+
<div class="px-6 py-4">
28+
<div class="font-bold text-xl mb-2">Card Title</div>
29+
<p class="text-gray-700 text-base">
30+
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatibus quia, nulla! Maiores et perferendis eaque, exercitationem praesentium nihil.
31+
</p>
32+
</div>
33+
<div class="px-6 pt-4 pb-2">
34+
<span class="inline-block bg-gray-200 rounded-full px-3 py-1 text-sm font-semibold text-gray-700 mr-2">#tailwind</span>
35+
<span class="inline-block bg-gray-200 rounded-full px-3 py-1 text-sm font-semibold text-gray-700 mr-2">#css</span>
36+
<span class="inline-block bg-gray-200 rounded-full px-3 py-1 text-sm font-semibold text-gray-700">#hover</span>
37+
</div>
38+
</div>
39+
</div>
40+
41+
42+
<script>
43+
//No Javascript needed for this example
44+
</script>
45+
46+
</body>
47+
</html>
48+
```
49+
50+
To see the effect, add the following CSS using the `<style>` tag or your preferred method within the `<head>`:
51+
52+
```css
53+
.shadow-md:hover {
54+
transform: translateY(-5px) scale(1.02);
55+
box-shadow: 0 10px 20px rgba(0,0,0,0.2);
56+
transition: all 0.3s ease;
57+
}
58+
```
59+
60+
61+
62+
## Explanation
63+
64+
* **`container mx-auto p-8`**: Centers the card on the page and adds padding.
65+
* **`max-w-sm bg-white rounded-lg shadow-md overflow-hidden md:max-w-lg`**: Sets the card's maximum width, background color, rounded corners, shadow, and prevents content overflow. `md:max-w-lg` makes it wider on medium screens and up.
66+
* **`px-6 py-4`**: Adds padding to the card's content.
67+
* **`font-bold text-xl mb-2`**: Styles the card title.
68+
* **`text-gray-700 text-base`**: Styles the card's paragraph text.
69+
* **`inline-block bg-gray-200 rounded-full px-3 py-1 text-sm font-semibold text-gray-700 mr-2`**: Styles the tags.
70+
* **`transform: translateY(-5px) scale(1.02)`**: This is the core of the hover effect. `translateY(-5px)` moves the card slightly up, and `scale(1.02)` increases its size.
71+
* **`box-shadow: 0 10px 20px rgba(0,0,0,0.2)`**: Creates a more pronounced shadow on hover.
72+
* **`transition: all 0.3s ease;`**: Makes the transition smooth over 0.3 seconds using an ease timing function.
73+
74+
75+
76+
## Resources to Learn More
77+
78+
* **Tailwind CSS Documentation:** [https://tailwindcss.com/docs](https://tailwindcss.com/docs) (Excellent resource for learning Tailwind utility classes)
79+
* **CSS Transitions and Transforms:** [https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Transitions/Using_CSS_transitions](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Transitions/Using_CSS_transitions) and [https://developer.mozilla.org/en-US/docs/Web/CSS/transform](https://developer.mozilla.org/en-US/docs/Web/CSS/transform) (Learn the basics of CSS transitions and transformations)
80+
* **MDN Web Docs (General CSS):** [https://developer.mozilla.org/en-US/docs/Web/CSS](https://developer.mozilla.org/en-US/docs/Web/CSS) (A comprehensive resource for all things CSS)
81+
82+
83+
Copyrights (c) OpenRockets Open-source Network. Free to use, copy, share, edit or publish.
84+

0 commit comments

Comments
 (0)