jackabald / NuancedNews

NuancedNews is a web appilcation that aggregates news stories from multiple sources to provide a well-rounded perspective on current events.
MIT License
5 stars 13 forks source link

Styling Home, More, and Why? pages #29

Closed jackabald closed 3 months ago

jackabald commented 3 months ago

Use Bootstrap/Tailwind (bootstrap is already loaded you will have to configure tailwind) or even just plain CSS to make the website look less chunky and more seasoned and professional. One possible way is to combine our Why? page with the Home page. We can place the information on the Why? page below the accordion on home and kind of have users scroll almost like what is on https://ethereum.org/en/

These are just ideas I want to have written down, if you would like to try to work on this and need further guidance or advice please just write a message.

Thanks!

jackabald commented 3 months ago

https://html5up.net/stellar

possibly use this? or look for more customizable templates that will go better with the current code

DolcePelo commented 3 months ago

I'd love to contribute to your project! I've already cloned the repository and completed the setup, but I'm unable to see the news on the home page. This might be because I didn't configure Python correctly, as I'm not very familiar with it (my primary stack is MERN). In addition to that, I'd like to help with this issue and any others that come up.

jackabald commented 3 months ago

Hey @DolcePelo,

Please do contribute! There are a couple or reasons the articles may not be showing up here's some things that could be going wrong:

  1. You should run the parser script before running the backend, this creates the json file where all of the articles are stored.
    cd Backend
    python rss_parser.py
    python app.py
  2. Make sure that you are running the backend and frontend concurrently, so in one terminal you should have have the backend working with
    cd Backend
    python rss_parser.py
    python app.py

    and while that is running you should run:

    cd Frontend
    npm run dev

    in a different terminal.

If you have tried all of these to no avail, please check the console logs and I can help further.

Thank you for contributing and good luck coding!

DolcePelo commented 3 months ago

Great, i did it!!! Now on i will try to help you as much as i can, mostly on frontend because i don't understand python yet, unless i could help you with nodejs for backend in the future. And thank you to let me contribute this help me a lot to practice and improve myself.

greetings

DolcePelo commented 3 months ago

Captura de pantalla 2024-08-12 230057 I can imagine something like that maybe cards and a vertical scroll and when the news finishes the Why section

jackabald commented 3 months ago

I think that looks really good! I like maintaining the articles as cards and I really like this UI design.

DolcePelo commented 3 months ago

Jack just a question, i'm already working on the frontend, Does the .rss have an imageUrl to bring or just the title, link and description?

jackabald commented 3 months ago

Just the title, link, and description are being passed to the front end.

This is what an RSS feed looks like: https://moxie.foxnews.com/google-publisher/politics.xml

There is also a <content:encoded> section that I think could be very useful to host the article content straight on our website, but I need to do more research on this.

If articles look better with images, you can add a placeholder image or images based on source, and I can work on finding ways to scrape images.