diff --git a/apps/fakeoverflow-angular/src/app/app.routes.ts b/apps/fakeoverflow-angular/src/app/app.routes.ts index ce9f0d7..a716e31 100644 --- a/apps/fakeoverflow-angular/src/app/app.routes.ts +++ b/apps/fakeoverflow-angular/src/app/app.routes.ts @@ -30,7 +30,8 @@ export const routes: Routes = [ { path: 'post', loadComponent: () => import('./pages/home/home/CreatePost/post').then(m => m.PostComponent) }, { path: 'update', loadComponent: () => import('./pages/home/home/UpdatePost/update').then(m => m.UpdateComponent) }, { path: 'detail', loadComponent: () => import('./pages/home/home/PostDetails/details').then(m => m.DetailsComponent) }, - { path: 'personalhome', loadComponent: () => import('./pages/home/home/PersonalQuestionsHome/personalHome').then(m => m.PersonalHome) }, + { path: 'my-questions', loadComponent: () => import('./pages/home/home/MyQuestions/myQuestions').then(m => m.MyQuestions) }, + { path: 'profile', loadComponent: () => import('./pages/home/home/Profile/profile').then(m => m.Profile) }, { path: '', redirectTo: 'home', pathMatch: 'full' }, { path: '**', redirectTo: 'home' } diff --git a/apps/fakeoverflow-angular/src/app/pages/home/home/CreatePost/post.html b/apps/fakeoverflow-angular/src/app/pages/home/home/CreatePost/post.html index 4d470df..bccbc30 100644 --- a/apps/fakeoverflow-angular/src/app/pages/home/home/CreatePost/post.html +++ b/apps/fakeoverflow-angular/src/app/pages/home/home/CreatePost/post.html @@ -1,30 +1,110 @@
-
-

Ask question

- -
-
- - -
Enter at least 10 characters
-
- -
- - -
Enter at least 20 characters
-
- -
- -
Submitted
-
-
+
+
+ + +
+ + + + +
+
+
+

Ask a Question

+

Get help from the community

+
+
+ + +
+
+ +
+ +
+ +

Be specific and imagine you're asking a question to another person.

+ +
+ Title must be at least 10 characters +
+
+ + +
+ +

Introduce the problem and expand on what you put in the title. Minimum 20 characters.

+ +
+ Body must be at least 20 characters +
+
+ + +
+ +

Add up to 5 tags to describe what your question is about. Separate with commas.

+ +
+ + +
+ +
+ + + + Question Posted! +
+
+
+
+
+ + + + +
diff --git a/apps/fakeoverflow-angular/src/app/pages/home/home/CreatePost/post.ts b/apps/fakeoverflow-angular/src/app/pages/home/home/CreatePost/post.ts index 7ccc366..e428ebe 100644 --- a/apps/fakeoverflow-angular/src/app/pages/home/home/CreatePost/post.ts +++ b/apps/fakeoverflow-angular/src/app/pages/home/home/CreatePost/post.ts @@ -1,12 +1,15 @@ import { Component } from '@angular/core'; import { CommonModule } from '@angular/common'; import { FormsModule, NgForm } from '@angular/forms'; +import { RouterLink } from '@angular/router'; import {Navbar} from '@shared/navbar/navbar'; +import { CommunityStats } from '@shared/community-stats/community-stats'; +import { TrendingTags } from '@shared/trending-tags/trending-tags'; @Component({ selector: 'app-post', standalone: true, - imports: [Navbar, CommonModule, FormsModule], + imports: [Navbar, CommonModule, FormsModule, RouterLink, CommunityStats, TrendingTags], templateUrl: './post.html', styleUrl: './post.scss' }) diff --git a/apps/fakeoverflow-angular/src/app/pages/home/home/MyQuestions/myQuestions.html b/apps/fakeoverflow-angular/src/app/pages/home/home/MyQuestions/myQuestions.html new file mode 100644 index 0000000..c3fd73a --- /dev/null +++ b/apps/fakeoverflow-angular/src/app/pages/home/home/MyQuestions/myQuestions.html @@ -0,0 +1,170 @@ + +
+
+
+
+ + + + +
+
+
+
+

My Questions

+

7 questions posted

+
+ +
+
+ + +
+ + + +
+ + +
+ + +
+ +
+
+ 12 + votes +
+
+ 3 + answers +
+
+ 245 + views +
+
+ + +
+

+ Global Markets Rebound as Investors Anticipate Fed Rate Cut +

+

+ Stock markets across the globe rallied after signals from the U.S. Federal Reserve suggested a possible interest rate cut in December... +

+
+ Markets + Finance + Technology +
+
+ Posted 2 days ago +
+ + + + + + View + + +
+
+
+
+ + +
+
+
+ 8 + votes +
+
+ 2 + answers +
+
+ 156 + views +
+
+
+

+ How to implement state management in Angular 18? +

+

+ I'm building a medium-sized Angular application and wondering about best practices for state management... +

+
+ angular + state-management +
+
+ Posted 3 days ago +
+ + + + + + View + + +
+
+
+
+ +
+ + +
+ +
+
+ + + + +
+
+
\ No newline at end of file diff --git a/apps/fakeoverflow-angular/src/app/pages/home/home/PersonalQuestionsHome/personalHome.scss b/apps/fakeoverflow-angular/src/app/pages/home/home/MyQuestions/myQuestions.scss similarity index 100% rename from apps/fakeoverflow-angular/src/app/pages/home/home/PersonalQuestionsHome/personalHome.scss rename to apps/fakeoverflow-angular/src/app/pages/home/home/MyQuestions/myQuestions.scss diff --git a/apps/fakeoverflow-angular/src/app/pages/home/home/MyQuestions/myQuestions.ts b/apps/fakeoverflow-angular/src/app/pages/home/home/MyQuestions/myQuestions.ts new file mode 100644 index 0000000..2375f54 --- /dev/null +++ b/apps/fakeoverflow-angular/src/app/pages/home/home/MyQuestions/myQuestions.ts @@ -0,0 +1,17 @@ +import { Component } from '@angular/core'; +import {Navbar} from '@shared/navbar/navbar'; +import { RouterLink } from '@angular/router'; +import { CommunityStats } from '@shared/community-stats/community-stats'; +import { TrendingTags } from '@shared/trending-tags/trending-tags'; + +@Component({ + selector: 'app-my-questions', + imports: [ + Navbar, RouterLink, CommunityStats, TrendingTags + ], + templateUrl: './myQuestions.html', + styleUrl: './myQuestions.scss' +}) +export class MyQuestions { + +} diff --git a/apps/fakeoverflow-angular/src/app/pages/home/home/PersonalQuestionsHome/personalHome.html b/apps/fakeoverflow-angular/src/app/pages/home/home/PersonalQuestionsHome/personalHome.html deleted file mode 100644 index 4a460a3..0000000 --- a/apps/fakeoverflow-angular/src/app/pages/home/home/PersonalQuestionsHome/personalHome.html +++ /dev/null @@ -1,252 +0,0 @@ - -
-
-
-
-
-
-
-

Manage Your Posts

-

7 questions posted

-
- -
- -
- - -
-
- -
-
-
-
-
-
-
12
-
votes
-
-
-
3
-
answers
-
-
-
245
-
views
-
-
-
-
-

- Global Markets Rebound as Investors Anticipate Fed Rate Cut -

- -
-

- Stock markets across the globe rallied after signals from the U.S. Federal Reserve suggested a possible interest rate cut in December... -

-
- Markets - Finance - Technology -
-
- Posted 2 days ago -
- - - - - - - View - - - - -
-
-
-
-
-
- -
-
-
-
-
-
8
-
votes
-
-
-
2
-
answers
-
-
-
156
-
views
-
-
-
-
-

- Global Markets Rebound as Investors Anticipate Fed Rate Cut -

- -
-

- Stock markets across the globe rallied after signals from the U.S. Federal Reserve suggested a possible interest rate cut in December -

-
- Markets - Finance - Technology -
-
- Posted 3 days ago -
- - - - - - - View - - - - -
-
-
-
-
-
-
- -
-
-
-
-
-
8
-
votes
-
-
-
2
-
answers
-
-
-
156
-
views
-
-
-
-
-

- Global Markets Rebound as Investors Anticipate Fed Rate Cut -

- -
-

- Stock markets across the globe rallied after signals from the U.S. Federal Reserve suggested a possible interest rate cut in December -

-
- Markets - Finance - Technology -
-
- Posted 3 days ago -
- - - - - - - View - - - - -
-
-
-
-
-
- - -
- -
-
- - - - - -
-
-
\ No newline at end of file diff --git a/apps/fakeoverflow-angular/src/app/pages/home/home/PersonalQuestionsHome/personalHome.ts b/apps/fakeoverflow-angular/src/app/pages/home/home/PersonalQuestionsHome/personalHome.ts deleted file mode 100644 index d5539f1..0000000 --- a/apps/fakeoverflow-angular/src/app/pages/home/home/PersonalQuestionsHome/personalHome.ts +++ /dev/null @@ -1,15 +0,0 @@ -import { Component } from '@angular/core'; -import {Navbar} from '@shared/navbar/navbar'; -import { RouterLink } from '@angular/router'; - -@Component({ - selector: 'app-home', - imports: [ - Navbar, RouterLink - ], - templateUrl: './personalHome.html', - styleUrl: './PersonalHome.scss' -}) -export class PersonalHome { - -} diff --git a/apps/fakeoverflow-angular/src/app/pages/home/home/Profile/profile.html b/apps/fakeoverflow-angular/src/app/pages/home/home/Profile/profile.html new file mode 100644 index 0000000..fe9b5be --- /dev/null +++ b/apps/fakeoverflow-angular/src/app/pages/home/home/Profile/profile.html @@ -0,0 +1,212 @@ + + +
+
+ + +
+ +
+
+ +
+ @if ((identity$ | async)?.avatarUrl; as avatarUrl) { + Profile picture + } @else { +
+ +
+ } +
+ + +
+

{{ (identity$ | async)?.name || profileData.name }}

+

@{{ profileData.username }}

+ + +
+
+
{{ profileData.stats.questions }}
+
Questions
+
+
+
{{ profileData.stats.answers }}
+
Answers
+
+
+ + +
+

+ {{ profileData.bio }} +

+
+
+ + + +
+
+
+ + +
+ +
+ + +
+
+ +
+
+ + +
+

Recent Activity

+ + +
+
+
+
+ + + +
+
+
+

+ Answered: How to implement authentication in Angular? +

+

2 hours ago

+
+
+ +15 +
+
+ +
+
+
+ + + +
+
+ +
+ 3 answers +
+
+ +
+
+
+ + + +
+
+
+

+ Earned badge: Great Answer +

+

3 days ago

+
+
+
+
+ + +
+

Top Questions

+ +
+
+
+
+ + + + 45 +
+
+ + + + 12 +
+
+ +
+ +
+
+
+ + + + 32 +
+
+ + + + 8 +
+
+ +
+
+
+
+ + +
+ + + +
+
+
+
diff --git a/apps/fakeoverflow-angular/src/app/pages/home/home/Profile/profile.scss b/apps/fakeoverflow-angular/src/app/pages/home/home/Profile/profile.scss new file mode 100644 index 0000000..c526e61 --- /dev/null +++ b/apps/fakeoverflow-angular/src/app/pages/home/home/Profile/profile.scss @@ -0,0 +1,69 @@ +// Profile Page Styles + +// Smooth transitions for all interactive elements +button, a { + transition: all 0.2s ease-in-out; +} + +// Custom scrollbar +::-webkit-scrollbar { + width: 8px; +} + +::-webkit-scrollbar-track { + background: #f1f1f1; +} + +::-webkit-scrollbar-thumb { + background: #888; + border-radius: 4px; + + &:hover { + background: #555; + } +} + +// Dark mode scrollbar +:host-context(.dark) { + ::-webkit-scrollbar-track { + background: #1f2937; + } + + ::-webkit-scrollbar-thumb { + background: #4b5563; + + &:hover { + background: #6b7280; + } + } +} + +// Tab animation +nav button { + position: relative; + + &::after { + content: ''; + position: absolute; + bottom: -2px; + left: 0; + right: 0; + height: 2px; + background: currentColor; + transform: scaleX(0); + transition: transform 0.3s ease-in-out; + } + + &:hover::after { + transform: scaleX(1); + } +} + +// Badge hover effect +.space-y-3 > div { + transition: transform 0.2s ease-in-out; + + &:hover { + transform: translateX(4px); + } +} diff --git a/apps/fakeoverflow-angular/src/app/pages/home/home/Profile/profile.ts b/apps/fakeoverflow-angular/src/app/pages/home/home/Profile/profile.ts new file mode 100644 index 0000000..6dfd3e6 --- /dev/null +++ b/apps/fakeoverflow-angular/src/app/pages/home/home/Profile/profile.ts @@ -0,0 +1,43 @@ +import { Component, inject, OnInit } from '@angular/core'; +import { Navbar } from '@shared/navbar/navbar'; +import { RouterLink } from '@angular/router'; +import { CommunityStats } from '@shared/community-stats/community-stats'; +import { TrendingTags } from '@shared/trending-tags/trending-tags'; +import { Authentication } from '@services/authentication'; +import { AsyncPipe, CommonModule } from '@angular/common'; +import { AvvvatarsComponent } from '@ngxpert/avvvatars'; + +@Component({ + selector: 'app-profile', + standalone: true, + imports: [ + CommonModule, + Navbar, + RouterLink, + CommunityStats, + TrendingTags, + AsyncPipe, + AvvvatarsComponent + ], + templateUrl: './profile.html', + styleUrl: './profile.scss' +}) +export class Profile implements OnInit { + private readonly authentication = inject(Authentication); + protected readonly identity$ = this.authentication.currentIdentity; + + // Profile data structure (placeholder) + profileData = { + name: 'John Doe', + username: 'johndoe', + bio: 'Full-stack developer passionate about building scalable web applications. Love solving complex problems and helping others in the community.', + stats: { + questions: 42, + answers: 128 + } + }; + + ngOnInit(): void { + // Initialize profile data + } +} diff --git a/apps/fakeoverflow-angular/src/app/pages/home/home/home.html b/apps/fakeoverflow-angular/src/app/pages/home/home/home.html index f15a7d0..042e095 100644 --- a/apps/fakeoverflow-angular/src/app/pages/home/home/home.html +++ b/apps/fakeoverflow-angular/src/app/pages/home/home/home.html @@ -1,17 +1,22 @@
-
-
+
+
- -
-
+ +
+
+
-

Questions

-

Updated just now

+

All Questions

+
+

4,234,567 questions

+ +

Updated just now

+
-
+ +
+ + +
+ + +
+ + +
+ +
+
+ 0 + votes +
+
+ 0 + answers +
+
+ 1,234 + views +
+
- -
-
-

- European Inflation Eases as Energy Prices Drop + +
+

+ How do I calculate the complexity of a recursive algorithm with multiple branches?

-

- Inflation across the Eurozone eased to 2.7% in October, driven by falling energy costs and improved supply chains, according to Eurostat’s preliminary data... +

+ I'm trying to understand how to analyze the time complexity of a recursive function that has multiple recursive calls. For example, if I have a function that calls itself twice...

- Economy - Europe - Finance -
-
-
-
AM
- Anna Müller + algorithms + recursion + time-complexity +
+
+ asked 10 mins ago +
+
AM
+ Anna Müller
- Posted 10 mins ago + 123 reputation
- -
-
-

- Ireland Announces New Climate Investment Plan for 2026 + +
+ +
+
+ 15 + votes +
+
+ 3 + answers +
+
+ 5,789 + views +
+
+ + +
+

+ What's the best way to implement state management in Angular 18+?

-

- The Irish government unveiled a €2.4 billion plan focused on renewable energy infrastructure, electric transport, and green housing to meet 2030 emissions targets... +

+ I'm building a medium-sized Angular application and I'm wondering what the current best practices are for state management. Should I use NgRx, Signals, or something else...

- Environment - Ireland - Sustainability -
-
-
-
RL
- Robert Lynch + angular + state-management + ngrx +
+
+ asked 45 mins ago +
+
RL
+ Robert Lynch
- Posted 45 mins ago + 4,521 reputation
- -
-
-

- Apple Reports Record Profits Amid Global Slowdown + +
+ +
+
+ 42 + votes +
+
+ 8 + answers +
+
+ 12.5k + views +
+
+ + +
+

+ Why does my TypeScript interface allow extra properties?

-

- Despite a global drop in consumer electronics demand, Apple’s quarterly revenue surpassed $120 billion, boosted by strong iPhone sales in Asia... +

+ I've defined an interface in TypeScript with specific properties, but when I create an object that implements this interface, TypeScript allows me to add extra properties that aren't defined...

- Technology - Business + typescript + interfaces + type-checking
-
-
-
EP
- Emma Parker +
+ asked 2 hours ago +
+
EP
+ Emma Parker
- Posted 2 hours ago + 8,932 reputation
- -
-
-

- Global Markets Rebound as Investors Anticipate Fed Rate Cut + +
+ +
+
+ 7 + votes +
+
+ 1 + answer +
+
+ 892 + views +
+
+ + +
+

+ How to properly handle async/await in .NET Core with Entity Framework? +

+

+ I'm working on a .NET Core API and I'm trying to understand the best practices for using async/await with Entity Framework Core. Should I always use async methods, or are there cases... +

+
+ c# + async-await + entity-framework +
+
+ asked 3 hours ago +
+
DK
+ David Keane +
+ 2,134 reputation +
+
+
+ + +
+ +
+
+ 23 + votes +
+
+ 5 + answers +
+
+ 3,421 + views +
+
+ + +
+

+ Best practices for deploying Docker containers in production?

-

- Stock markets across the globe rallied after signals from the U.S. Federal Reserve suggested a possible interest rate cut in December... +

+ I'm preparing to deploy my first containerized application to production. What are the essential best practices I should follow for security, monitoring, and scaling Docker containers...

- Markets - US - Finance -
-
-
-
DK
- David Keane + docker + deployment + kubernetes +
+
+ asked 5 hours ago +
+
JS
+ John Smith
- Posted 3 hours ago + 12,567 reputation
+
- +
-

- +
diff --git a/apps/fakeoverflow-angular/src/app/pages/home/home/home.ts b/apps/fakeoverflow-angular/src/app/pages/home/home/home.ts index e2e30ba..dfc653d 100644 --- a/apps/fakeoverflow-angular/src/app/pages/home/home/home.ts +++ b/apps/fakeoverflow-angular/src/app/pages/home/home/home.ts @@ -1,11 +1,13 @@ import { Component } from '@angular/core'; import {Navbar} from '@shared/navbar/navbar'; import { RouterLink } from '@angular/router'; +import { CommunityStats } from '@shared/community-stats/community-stats'; +import { TrendingTags } from '@shared/trending-tags/trending-tags'; @Component({ selector: 'app-home', imports: [ - Navbar, RouterLink + Navbar, RouterLink, CommunityStats, TrendingTags ], templateUrl: './home.html', styleUrl: './home.scss' diff --git a/apps/fakeoverflow-angular/src/app/shared/community-stats/community-stats.html b/apps/fakeoverflow-angular/src/app/shared/community-stats/community-stats.html new file mode 100644 index 0000000..6a00810 --- /dev/null +++ b/apps/fakeoverflow-angular/src/app/shared/community-stats/community-stats.html @@ -0,0 +1,32 @@ + +
+
+
+
+ + + +

Community Stats

+
+
+
+
+ 4.2M + questions +
+
+
+
+ 8.9M + answers +
+
+
+
+ 95% + answered +
+
+
+
+
diff --git a/apps/fakeoverflow-angular/src/app/shared/community-stats/community-stats.scss b/apps/fakeoverflow-angular/src/app/shared/community-stats/community-stats.scss new file mode 100644 index 0000000..dc6b76a --- /dev/null +++ b/apps/fakeoverflow-angular/src/app/shared/community-stats/community-stats.scss @@ -0,0 +1 @@ +// Community Stats Component Styles diff --git a/apps/fakeoverflow-angular/src/app/shared/community-stats/community-stats.ts b/apps/fakeoverflow-angular/src/app/shared/community-stats/community-stats.ts new file mode 100644 index 0000000..7a03781 --- /dev/null +++ b/apps/fakeoverflow-angular/src/app/shared/community-stats/community-stats.ts @@ -0,0 +1,10 @@ +import { Component } from '@angular/core'; + +@Component({ + selector: 'app-community-stats', + standalone: true, + templateUrl: './community-stats.html', + styleUrl: './community-stats.scss' +}) +export class CommunityStats { +} diff --git a/apps/fakeoverflow-angular/src/app/shared/navbar/navbar.html b/apps/fakeoverflow-angular/src/app/shared/navbar/navbar.html index 7a0f4f0..90e0c35 100644 --- a/apps/fakeoverflow-angular/src/app/shared/navbar/navbar.html +++ b/apps/fakeoverflow-angular/src/app/shared/navbar/navbar.html @@ -50,7 +50,7 @@ @if (identity$ | async; as identity) { - @if (identity.avatarUrl) { avatarFor Teams
@if (identity$ | async; as identity) { - + {{ identity.name }} } @else { diff --git a/apps/fakeoverflow-angular/src/app/shared/trending-tags/trending-tags.html b/apps/fakeoverflow-angular/src/app/shared/trending-tags/trending-tags.html new file mode 100644 index 0000000..c06c6ae --- /dev/null +++ b/apps/fakeoverflow-angular/src/app/shared/trending-tags/trending-tags.html @@ -0,0 +1,66 @@ + + diff --git a/apps/fakeoverflow-angular/src/app/shared/trending-tags/trending-tags.scss b/apps/fakeoverflow-angular/src/app/shared/trending-tags/trending-tags.scss new file mode 100644 index 0000000..75d925c --- /dev/null +++ b/apps/fakeoverflow-angular/src/app/shared/trending-tags/trending-tags.scss @@ -0,0 +1,6 @@ +// Trending Tags Component Styles + +:host { + display: block; + margin-top: 1.5rem; +} \ No newline at end of file diff --git a/apps/fakeoverflow-angular/src/app/shared/trending-tags/trending-tags.ts b/apps/fakeoverflow-angular/src/app/shared/trending-tags/trending-tags.ts new file mode 100644 index 0000000..a828e55 --- /dev/null +++ b/apps/fakeoverflow-angular/src/app/shared/trending-tags/trending-tags.ts @@ -0,0 +1,10 @@ +import { Component } from '@angular/core'; + +@Component({ + selector: 'app-trending-tags', + standalone: true, + templateUrl: './trending-tags.html', + styleUrl: './trending-tags.scss' +}) +export class TrendingTags { +}