👨‍🎨 The Dev Tab Daily: My Latest Hobby/Practice Cool Project
Tags: angular, webdev, frontend, news
Published: 2024-02-21 14:38:58

Heyy, how are you guys are today?!

I'd like to share my latest hobby/study project, this was really cool and productive to do as I managed to study, apply and practice many new and interesting things!

I always wanted a dashboard-style project with some websites that I visit frequently that would make access/view easy, so I implemented something similar with some technology information websites.

Aaannd the result is this beautiful thing: [Dev Tab Daily](https://dev-tab-daily.vercel.app/)

> The project is non-profit, it's just a project for me to practice, learn and share with you!
___

## 📝 The Project

The [Dev Tab Daily](https://dev-tab-daily.vercel.app/) is just a "dashboard" project to see some notices, development topics, Lofi songs, interesting websites and some other cool stuff!
___

### 📌 Technologies:

In this project I wanted to use some cool technologies to practice and learn more about them and also try some new things, the technologies are:

- Angular: v17
- Bootstrap: v5.3
- RxJs: v7.8
- Typescript: v5.2
- NGXS/Store: v3.8
- NGXS/Devtools-plugin: v3.8
- Vercel

___

### 🎨 The Homepage:

Basically, the **home page** is like a panel with some cards with different themes to view, with side scrolling and fully
responsive. And we also have some interesting components, like the **browsing history** button, **light/dark mode** and a button at the bottom to navigate around the site:

#### 📌 Mobile Version:
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4zun6jhscluox4eql8bc.png)

#### 📌 Desktop Version:
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0xve8vue94n3vcgrgpok.png)

___

### 🌓 Dark/Light Controller:

The Dev tab has the **Dark/Light** option too, it was cool to implement because I used some very interesting things, like:

- [Bootstrap Dark Mode](https://getbootstrap.com/docs/5.3/customize/color-modes/#dark-mode)
- [Angular Signals](https://angular.io/guide/signals)

And the result is like below:

#### 🌕 Light Mode:
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3ubm9nh68inuwr2x9h1s.png)

#### 🌑 Dark Mode:
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0xve8vue94n3vcgrgpok.png)

___

### 🔖 History of navigation:

On some sites I browse sometimes I miss an easily accessible browsing history (I know, we have the browser's own history),so I implemented a small one with the history and the option to clear it if the history doesn't make sense more, and it looked like this:

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/sl0pwb0v9be9fy8go7fd.png)
___

### 🪤 Tests:

Unfortunately I don't have much time at work to implement tests in projects, so in this personal project I'm looking to implement and learn more about tests, and I'm really enjoying it. Some tests that the project has are:

#### 📌 Technology Badge Component Test:
```typescript
describe('BadgeTecnologieComponent', () => {
  let component: BadgeTecnologieComponent;
  let fixture: ComponentFixture<BadgeTecnologieComponent>;

  beforeEach(() => {
    TestBed.configureTestingModule({
      imports: [BadgeTecnologieComponent]
    });
    fixture = TestBed.createComponent(BadgeTecnologieComponent);
    component = fixture.componentInstance;
    fixture.detectChanges();
  });

  //(D) = Integration Test With DOM
  it(`(D) Should the aria-label property must have the same name shown in the element`, () => {
    fixture.detectChanges();
    const tecnologieNameExample: string = 'angular';
    component.tecnologie = tecnologieNameExample;
    fixture.detectChanges();
    const spanElement: HTMLElement = fixture.nativeElement.querySelector('span');
    expect(spanElement.getAttribute('aria-label')).toBe(tecnologieNameExample);
  });
});
```

#### 📌 Controller Storage Service Test:
```typescript
describe('ControllerStorageService', () => {
  let service: ControllerStorageService;

  beforeEach(() => {
    TestBed.configureTestingModule({});
    service = TestBed.inject(ControllerStorageService);
  });

  it(`${ControllerStorageService.prototype.getLocalStorage.name}()
                should throw new Error when called empty`, () => {

    expect(() => service.getLocalStorage(''))
      .withContext('Called with empty value')
      .toThrowError();
  })
});
```
___

I'm working on this site constantly, because it was a cool project and gave me a lot of knowledge about some things I didn't know and the opportunity to implement things that I'm not used to.

If you feel curious how something was done, please leave a comment and let's talk more!

And I also hope you enjoyed the project and if you have any tips, suggestions or anything else, please leave a comment.

See you guys 😆