DEV Community

Cover image for 👨‍🎨 The Dev Tab Daily: My Latest Hobby/Practice Cool Project
Renan Ferro
Renan Ferro

Posted on

👨‍🎨 The Dev Tab Daily: My Latest Hobby/Practice Cool Project

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

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 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

📌 Desktop Version:

Image description

🌓 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:

And the result is like below:

🌕 Light Mode:

Image description

🌑 Dark Mode:

Image description

🔖 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

🪤 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:

describe('BadgeTecnologieComponent', () => {
  let component: BadgeTecnologieComponent;
  let fixture: ComponentFixture<BadgeTecnologieComponent>;

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

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

📌 Controller Storage Service Test:

describe('ControllerStorageService', () => {
  let service: ControllerStorageService;

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

                should throw new Error when called empty`, () => {

    expect(() => service.getLocalStorage(''))
      .withContext('Called with empty value')
Enter fullscreen mode Exit fullscreen mode

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 😆

Top comments (3)

michaeltharrington profile image
Michael Tharrington

Heyy!!! This looks slick. Nicely done, Renan!

The columns kinda remind me of Tweetdeck. I'm liking the variation of content sources and types! — how everything has got its own column and it's quick to scroll through each. Plus the night and day color themes are nice. I'm viewing it on desktop by the way — good stuff!

panditapan profile image

awesome work, it's pretty cool! :D

jangelodev profile image
João Angelo

Hi Renan Ferro,
Your tips are very useful
Thanks for sharing

Some comments may only be visible to logged-in visitors. Sign in to view all comments.