Redesign the UI #110

baseplate-admin · 2022-03-26T16:17:39Z

As the title goes.

Currently The site looks like this

Login Page

Register page

Edit Info Page

Home Page

Anime Info Page ( with episodes ) :

Anime Info Page ( without episodes ) :

If you think you see the need for any improvement comment down below 📃

baseplate-admin · 2022-03-26T16:21:41Z

Pinging @AKindWorld,

Please send some of your mockups here :) ( do note that we need a mobile mockup too )

baseplate-admin · 2022-03-26T16:23:22Z

If we go this route I will use React this time. Next.JS seems a good pick for this kind of project and we have Tailwind to power it all up.

baseplate-admin · 2022-03-26T16:26:52Z

Or should i go with just django?

I donno, Django's asset building pipeline is finicky.

AKindWorld · 2022-03-26T17:40:31Z

Hi there!

I was just working on this, however I'll need a bit more time to brainstorm a responsive UI. So far, I've redesigned it based on the Anime Info page, but I'll still need to add lots of components. I've decided on some parts of the design system, but I'll need to think through the UX as well. I'll quickly make a list of all possible design screens needed.

Login/Register page [same design, different fields]
Profile page [integrates Edit Info + user settings, etc]
Home page
Anime Info Page [same design for both w/ and w/o episodes; just that part will be different]
Video Player page [and player too?]
Misc. [other pages - FAQ, Terms, Contact, icons, etc based off the design system]
(possible other additions - comments, toasts/chips etc)

[all screens will have a, b, c (+more?) versions for various screen sizes. If I get enough time, I might be able to create a responsive mockup, but I can't guarantee on that currently]

Firstly I'll work on the design system (includes, but is not limited to, fonts, colors, icons and layouts), and then start off work on the various pages [order of importance ---> 3 --> 1 --> 4 --> rest].

Here is a link to the Figma file I'm working on: https://www.figma.com/file/knyOkHUChnJpsAsmuILhOk/Core-Project?node-id=0%3A1

If you're not familiar with Figma, don't worry! I just linked it so that you can see the stuff I'm working on. Ctrl + scroll to zoom in, normal scroll for vertical scroll, Shift + scroll for horizontal scroll is pretty much the most important shortcuts for viewing. The link currently doesn't have edit access (which is risky to share here).

Also, I'd suggest starting a new project to better keep track of the components & redesigns. Otherwise, it's going to become pretty hard to discuss mockups (& their pros & cons) here.

I think you can use whichever library you feel is best; I honestly don't have much experience using any of those, so I can't recommend any. I might be able to learn should I need to, since I've been wanting to learn those for quite a while.

Thanks for reading my Design 101 essay lol

also, I'll be replying to the other thread as soon as I finish working on the logo.

baseplate-admin · 2022-03-26T17:51:46Z

Lemme branch this off and start a V3 project 🤞.

The backend stays intact. Its the frontend that needs some work. 👀

On another note do you think we can use MUI? https://mui.com/

AKindWorld · 2022-03-26T18:11:50Z

aha yup! I took a look at the docs, and it seems to be pretty good. Pre-styled components would save us a lot of time, and after that, we can just tweak the CSS as we need it to be.

Good find!

baseplate-admin · 2022-03-26T18:13:30Z

Working on it.🤞 For now lemme finish the backend work, The V2 (svelte) app seems mostly finished :) But svelte is not as mature as i thought it to be :\ Oh well back to react we are,

Video Player page [and player too?]

We will use a library called videojs take a look at that.

Misc. [other pages - FAQ, Terms, Contact, icons, etc based off the design system]

yep. But what kind of pages should we add ? A wiki page?

I think you can use whichever library you feel is best; I honestly don't have much experience using any of those, so I can't recommend any. I might be able to learn should I need to, since I've been wanting to learn those for quite a while.

Well take my advice and dont learn anything related to JS. Its a mess. I donno how i keep my sanity while working with something that breaks constantly. ( But if you wanna shoot yourself in the foot start with javascript and react )

If you're not familiar with Figma, don't worry! I just linked it so that you can see the stuff I'm working on. Ctrl + scroll to zoom in, normal scroll for vertical scroll, Shift + scroll for horizontal scroll is pretty much the most important shortcuts for viewing. The link currently doesn't have edit access (which is risky to share here).

I am familiar with Figma. But as someone who got a constant F in Arts i feel myself disqualified to talk about designs.

[all screens will have a, b, c (+more?) versions for various screen sizes. If I get enough time, I might be able to create a responsive mockup, but I can't guarantee on that currently]

Okay no problem. MUI is mostly responsive :P >___< But as someone who will learn it for this project i cant comment much.

Also, I'd suggest starting a new project to better keep track of the components & redesigns. Otherwise, it's going to become pretty hard to discuss mockups (& their pros & cons) here.

Gimme some time. I never used the project board. I will look into it after i fix the anime genre and the anime studio links :)

Ultimately the backend is very robust. As someone who contributed to the django project i know very well how it works. The frontend part is not that tough. I will mull it through :).

Thanks for reading my Design 101 essay lol

You seem very talented. You have a bright future ahead of you. I wish you a happy future :D

So another question. Would you like to have write access to this repo? That way you yourself can make quick design fixes.

baseplate-admin · 2022-03-26T18:40:49Z

I have a small question. Is it possible to make this a shade of blue purple instead of white ? ( feel free to disagree )

Popup seems### Would you please work on this too ? ( feel free to disagree )

more of a good thing for desktop. But what about mobile ?

This with some animations would be a good loading spinner ( while we fetch data, we can show a placeholder )

I like this logo :) Lets go with it :D

Also since we are starting from scratch dont be afraid to do experiments. If you think in future another design seems good to you dont be afraid to ask. Because as long as the backend is not changing, frontend tooling with a UI library is not much work.

Steven-Ha-88 · 2022-03-27T00:20:34Z

Hi!

I have just come across this repo and as a anime lover, I would love to contribute to this project (if you plan on writing this in React and Next.js) :]

baseplate-admin · 2022-03-27T02:35:25Z

I would love to contribute to this project (if you plan on writing this in React and Next.js) :]

I do am planning to use next.js :) ( Backend stays python tho . Because i still didn't find a good reason to switch away from it. If you do see any comment on #31 )

I have some questions :

Can we write the project in typescript ? ( I really want to write it in typescript )
Are you familiar with sass ?
Are you familiar with CSS-in-JS libraries ?
Are you familiar with jikan.moe api ?
Are you familiar with django and django-rest-framework ? ( this is not a requirement but makes life easier )
Are you familiar with JWT token auth ? We are using djangorestframework-simplejwt for token generation.
Are you familiar with a UI library ? ( Tailwind maybe ? )
Are you familiar with Next.js ? If so how is the upgrade path for Next.js. Because with create-react-app and react-router soundcore is very hard to upgrade to latest version without major refactors. ( i am talking 1 - 2 weeks of refractoring and since i wrote it when i was young the code is very messy to read/write )
Do we plan on using a library like redux with redux-toolkit ? ( Which i don't think has a need for this project. Because react-query does things faster/easier. )
What animation library do we plan on using ? ( personally i like animejs )
Do we need GraphQL ? ( I am against this. Django with GraphQL is a pain to get working and this will need a major backend change. )
Do we need SSR or are we going with SSG ? ( I prefer SSG over SSR )

In any case welcome to project AnimeCore Do read this to get some context on the goal of this project. Submit PR and i will accept it :D But first let @AKindWorld finish the mockup stuff ( maybe you can help him too ? )

baseplate-admin · 2022-03-27T03:00:10Z

@AKindWorld would you take a look at tailwindcss ? Tell me do you prefer MUI or tailwindcss components ?

Also would you add a section in the profile page where it shows all the animes that a user watched ?

Have a good day 🤞

AKindWorld · 2022-03-27T05:17:20Z

Working on it.🤞 For now lemme finish the backend work, The V2 (svelte) app seems mostly finished :) But svelte is not as mature as i thought it to be :\ Oh well back to react we are,

Sure thing! Take your time. Above all else, we want a very strong backend, so that's the most important part, and you've got that covered.

We will use a library called videojs take a look at that.

Sounds great! VideoJS looks amazing, and I'm all in for customizability.

yep. But what kind of pages should we add ? A wiki page?

I think so. Mostly, for now, a FAQ, Contact Page, Terms/Policies, & Support page are the bare minimum pages needed. Other than that, let's see. ah- also a Request page maybe? I think you had a field for that in the Readme version.

Well take my advice and dont learn anything related to JS. Its a mess. I donno how i keep my sanity while working with something that breaks constantly. ( But if you wanna shoot yourself in the foot start with javascript and react )

Hahaha, alrighty. For now, I don't think I'll start learning anything.

I am familiar with Figma. But as someone who got a constant F in Arts i feel myself disqualified to talk about designs.

Don' worry about it! Arts, as we know it, is hugely different from the UI & UX counterparts, and above everything, I think, it relies on experience than any sort of theoretical knowledge. I'm myself a hobby designer too. So anyways, feel free to chip in your thoughts!

Gimme some time. I never used the project board. I will look into it after i fix the anime genre and the anime studio links :)

Ultimately the backend is very robust. As someone who contributed to the django project i know very well how it works. The frontend part is not that tough. I will mull it through :).

Sure thing! Take your time. I think discussing mockups would be pretty hard even in the Projects, but atleast we'll be able to keep track of everything in there. Also, I need a bit of user feedback for most of my designs, otherwise I might make severe UX mistakes.

You seem very talented. You have a bright future ahead of you. I wish you a happy future :D

Thank you! And I'd say the same for you. I myself, can't make head or tail of backend systems, so design & possibly, little bits of frontend code are the only ways I can contribute.

So another question. Would you like to have write access to this repo? That way you yourself can make quick design fixes.

I would really appreciate it, but currently, (until the design system is final), I won't make any changes to the project. After I've decided on everything though, I might be able to help here and there.

would you take a look at tailwindcss ? Tell me do you prefer MUI or tailwindcss components?

I like both of those. I personally am favoring TailwindCSS more right now, but in the end, as long as it works good, it's all fine. We would have to manually tweak components either way. Also, I'm not much of an expert in this topic, but whichever has the least size and network load, if any, should be the one we work with.

Also would you add a section in the profile page where it shows all the animes that a user watched ?

Sure! I'll get to that when I start the Profile page designing.

Also, about all your feedbacks related to the UI, I'll try my best to work on them. Right now, I'm designing the Base design system, once that's done, I'll get started with the Home Page and eventually, the rest of the pages.

Thanks for your advices and for reading this! :)

Have a great time ahead! ^^

baseplate-admin · 2022-03-27T18:40:33Z

@AKindWorld I added you as a collaborator. I might go AWOL because i have exams soon. So in that time i recon you can do a little bit of poking in this Repo :)

Now i have the anime genre part going on i still need to add more things to the API :) Since we are going to work on the frontend soon, its better to tidy up the backend a bit more :)

Thanks for reading 🥳

AKindWorld · 2022-03-27T18:54:31Z

Thank you. I have accepted it as well. Also, I've finished the Base design system & todo list, and the Homepage UI is currently underway. You can take a look at the Figma file (same link). Feel free to let me know if there's anything I should change, or if the design looks okay. Also, should I start keeping track of stuff in the Projects board, or would you do that later on? (There's no hurry though)

Also, wish you best of luck for your exams!

baseplate-admin · 2022-03-27T19:12:30Z

Also, wish you best of luck for your exams!

Thanks mate :) I hate studies but in this world people seem to care more about a degree than talent thus forcing me to waste my time on subjects that doesn't interest me. (Fun fact, I failed in Computer Studies XD)

Also, should I start keeping track of stuff in the Projects board, or would you do that later on? (There's no hurry though)

Add anything you like :) Treat this repo as part of our own. I think we should open a new github organization based on Coreproject https://github.com/CoreProject and move this repo there :) Thoughts ?

Thank you. I have accepted it as well. Also, I've finished the Base design system & todo list, and the Homepage UI is currently underway. You can take a look at the Figma file (same link). Feel free to let me know if there's anything I should change, or if the design looks okay.

Lets take a look at what our api can return :

JSON

{
    "data": {
        "mal_id": 1,
        "url": "https://myanimelist.net/anime/1/Cowboy_Bebop",
        "images": {
            "jpg": {
                "image_url": "https://cdn.myanimelist.net/images/anime/4/19644.jpg",
                "small_image_url": "https://cdn.myanimelist.net/images/anime/4/19644t.jpg",
                "large_image_url": "https://cdn.myanimelist.net/images/anime/4/19644l.jpg"
            },
            "webp": {
                "image_url": "https://cdn.myanimelist.net/images/anime/4/19644.webp",
                "small_image_url": "https://cdn.myanimelist.net/images/anime/4/19644t.webp",
                "large_image_url": "https://cdn.myanimelist.net/images/anime/4/19644l.webp"
            }
        },
        "trailer": {
            "youtube_id": "qig4KOK2R2g",
            "url": "https://www.youtube.com/watch?v=qig4KOK2R2g",
            "embed_url": "https://www.youtube.com/embed/qig4KOK2R2g?enablejsapi=1&wmode=opaque&autoplay=1",
            "images": {
                "image_url": "https://img.youtube.com/vi/qig4KOK2R2g/default.jpg",
                "small_image_url": "https://img.youtube.com/vi/qig4KOK2R2g/sddefault.jpg",
                "medium_image_url": "https://img.youtube.com/vi/qig4KOK2R2g/mqdefault.jpg",
                "large_image_url": "https://img.youtube.com/vi/qig4KOK2R2g/hqdefault.jpg",
                "maximum_image_url": "https://img.youtube.com/vi/qig4KOK2R2g/maxresdefault.jpg"
            }
        },
        "title": "Cowboy Bebop",
        "title_english": "Cowboy Bebop",
        "title_japanese": "\u30ab\u30a6\u30dc\u30fc\u30a4\u30d3\u30d0\u30c3\u30d7",
        "title_synonyms": [],
        "type": "TV",
        "source": "Original",
        "episodes": 26,
        "status": "Finished Airing",
        "airing": false,
        "aired": {
            "from": "1998-04-03T00:00:00+00:00",
            "to": "1999-04-24T00:00:00+00:00",
            "prop": {
                "from": {
                    "day": 3,
                    "month": 4,
                    "year": 1998
                },
                "to": {
                    "day": 24,
                    "month": 4,
                    "year": 1999
                }
            },
            "string": "Apr 3, 1998 to Apr 24, 1999"
        },
        "duration": "24 min per ep",
        "rating": "R - 17+ (violence & profanity)",
        "score": 8.76,
        "scored_by": 808703,
        "rank": 35,
        "popularity": 42,
        "members": 1574429,
        "favorites": 69778,
        "synopsis": "Crime is timeless. By the year 2071, humanity has expanded across the galaxy, filling the surface of other planets with settlements like those on Earth. These new societies are plagued by murder, drug use, and theft, and intergalactic outlaws are hunted by a growing number of tough bounty hunters. Spike Spiegel and Jet Black pursue criminals throughout space to make a humble living. Beneath his goofy and aloof demeanor, Spike is haunted by the weight of his violent past. Meanwhile, Jet manages his own troubled memories while taking care of Spike and the Bebop, their ship. The duo is joined by the beautiful con artist Faye Valentine, odd child Edward Wong Hau Pepelu Tivrusky IV, and Ein, a bioengineered Welsh Corgi. While developing bonds and working to catch a colorful cast of criminals, the Bebop crew's lives are disrupted by a menace from Spike's past. As a rival's maniacal plot continues to unravel, Spike must choose between life with his newfound family or revenge for his old wounds. [Written by MAL Rewrite]",
        "background": "When Cowboy Bebop first aired in spring of 1998 on TV Tokyo, only episodes 2, 3, 7-15, and 18 were broadcast, it was concluded with a recap special known as Yose Atsume Blues. This was due to anime censorship having increased following the big controversies over Evangelion, as a result most of the series was pulled from the air due to violent content. Satellite channel WOWOW picked up the series in the fall of that year and aired it in its entirety uncensored. Cowboy Bebop was not a ratings hit in Japan, but sold over 19,000 DVD units in the initial release run, and 81,000 overall. Protagonist Spike Spiegel won Best Male Character, and Megumi Hayashibara won Best Voice Actor for her role as Faye Valentine in the 1999 and 2000 Anime Grand Prix, respectively. Cowboy Bebop's biggest influence has been in the United States, where it premiered on Adult Swim in 2001 with many reruns since. The show's heavy Western influence struck a chord with American viewers, where it became a \"gateway drug\" to anime aimed at adult audiences.",
        "season": "spring",
        "year": 1998,
        "broadcast": {
            "day": "Saturdays",
            "time": "01:00",
            "timezone": "Asia/Tokyo",
            "string": "Saturdays at 01:00 (JST)"
        },
        "producers": [
            {
                "mal_id": 23,
                "type": "anime",
                "name": "Bandai Visual",
                "url": "https://myanimelist.net/anime/producer/23/Bandai_Visual"
            }
        ],
        "licensors": [
            {
                "mal_id": 102,
                "type": "anime",
                "name": "Funimation",
                "url": "https://myanimelist.net/anime/producer/102/Funimation"
            },
            {
                "mal_id": 233,
                "type": "anime",
                "name": "Bandai Entertainment",
                "url": "https://myanimelist.net/anime/producer/233/Bandai_Entertainment"
            }
        ],
        "studios": [
            {
                "mal_id": 14,
                "type": "anime",
                "name": "Sunrise",
                "url": "https://myanimelist.net/anime/producer/14/Sunrise"
            }
        ],
        "genres": [
            {
                "mal_id": 1,
                "type": "anime",
                "name": "Action",
                "url": "https://myanimelist.net/anime/genre/1/Action"
            },
            {
                "mal_id": 2,
                "type": "anime",
                "name": "Adventure",
                "url": "https://myanimelist.net/anime/genre/2/Adventure"
            },
            {
                "mal_id": 4,
                "type": "anime",
                "name": "Comedy",
                "url": "https://myanimelist.net/anime/genre/4/Comedy"
            },
            {
                "mal_id": 8,
                "type": "anime",
                "name": "Drama",
                "url": "https://myanimelist.net/anime/genre/8/Drama"
            },
            {
                "mal_id": 24,
                "type": "anime",
                "name": "Sci-Fi",
                "url": "https://myanimelist.net/anime/genre/24/Sci-Fi"
            }
        ],
        "explicit_genres": [],
        "themes": [
            {
                "mal_id": 29,
                "type": "anime",
                "name": "Space",
                "url": "https://myanimelist.net/anime/genre/29/Space"
            }
        ],
        "demographics": []
    }
}

Specially this part

 "trailer": {
            "youtube_id": "qig4KOK2R2g",
            "url": "https://www.youtube.com/watch?v=qig4KOK2R2g",
            "embed_url": "https://www.youtube.com/embed/qig4KOK2R2g?enablejsapi=1&wmode=opaque&autoplay=1",
            "images": {
                "image_url": "https://img.youtube.com/vi/qig4KOK2R2g/default.jpg",
                "small_image_url": "https://img.youtube.com/vi/qig4KOK2R2g/sddefault.jpg",
                "medium_image_url": "https://img.youtube.com/vi/qig4KOK2R2g/mqdefault.jpg",
                "large_image_url": "https://img.youtube.com/vi/qig4KOK2R2g/hqdefault.jpg",
                "maximum_image_url": "https://img.youtube.com/vi/qig4KOK2R2g/maxresdefault.jpg"
            }
        }

Now we can make this part based on all these info :)

I like your design :) Lets go with it :)

Do you think we can make it a bit more fancy ?

A small question

I have another question. Is the font open source / downloadable ? Because i cant seem to find the OTF file for it.

baseplate-admin · 2022-03-27T20:17:44Z

I have a question regarding the API design.
We have 2 options to get rating for animes

Make our own from scratch.
Use MAL api ( its a nightmare to do properly and @jikan-me will probably rate limit us. But its possible to do with async task queue )

Thanks for reading 🥳

AKindWorld · 2022-03-28T04:26:10Z

Add anything you like :) Treat this repo as part of our own. I think we should open a new github organization based on Coreproject https://github.com/CoreProject and move this repo there :) Thoughts ?

Thank you, I'll do that soon then. Also, that's a great idea. Although since I don't know any of the downsides of that, it's okay even if we can't. If we can, then that's great!

About the anime info page, currently it's unfinished, and I'm also planning an overhaul based off the new system. However, the data fields would stay the same, pretty much.

Do you think we can make it a bit more fancy ?

Sure sure. I actually have something in mind regarding that, but it's not possible to express it in a mockup now. I'll try and see what I can do about it.

I have a question regarding the API design.
We have 2 options to get rating for animes

Make our own from scratch.
Use MAL api ( its a nightmare to do properly and https://github.com/jikan-me will probably rate limit us. But its possible to do with async task queue )

I think you can also take a look at the anilist.co API, I personally really like AniList, and the API is also free for us. Otherwise, there's the Kitsu/Hummingbird API. I think this Taiga doc has all the comparisons.

If nothing works, then we can always create one from scratch ^^

Good day to you!

baseplate-admin · 2022-03-28T04:56:17Z

So my plan is to update the anime entries from this project. Lets see an example :

Suppose you watch One Piece : Episode 1 in this site.
You have authenticated your MyAnimeList account with your account on this site.
Now the site will make a request on behalf of you to update the Anime entry in MyAnimeList.
MyAnimeList profile shows that you have watched Episode 1.

So essentially when you start watching a episode in this site, the site will make an internal request on your behalf to update the entries.

I think you can also take a look at the anilist.co API, I personally really like AniList, and the API is also free for us. Otherwise, there's the Kitsu/Hummingbird API. I think this Taiga doc has all the comparisons.

Yea I think we need to discuss this stuff. So currently the site works like this.

Scrape everything from jikan.moe
Seed the database using MAL_Scraper
Make mal_id the primary key. Which means, the mal ids are mapped to this project. https://myanimelist.net/anime/1/ -> http://coreproject.com/api/v1/anime/1/. Note that the id ( 1 in this case ) stays the same. Which means we map animes from MAL in a 1:1 fashion. I dont think its a good design nor a bad one. If we were to use other provider we need to make our own numbering system. Which might make people a bit more confused.

But my end goal is to use one site to update MyAnimeList, Kitsu, Anilist, ( add more trackers ) accounts. For that to be the case we need to map everything to our own system. Which is a bit more complex ( we need to scrape the API from all of these providers and then make some sort of foreignkey mapping ).

I personally really like AniList

I never used this site. Lemme take a look :). Took a look. They are using element-ui. But thats Vue.js. Personally i dont have problems with any Frontend toolkit but to make the repo more friendly to collaborators React seems to be the better choice. @Steven-Ha-88 what say you ?

About the anime info page, currently it's unfinished, and I'm also planning an overhaul based off the new system. However, the data fields would stay the same, pretty much.

Okay then :) But i was asking to add a trailer / video ( for animes that have it ) option.

I also have a small favor to ask you :). Make a hard fork of this project in your repo and keep it private :) . In the event of a DMCA takedown, we will have another copy of this project

Thanks for reading. Have a good day :)

AKindWorld · 2022-03-28T06:41:15Z

So my plan is to update the anime entries from this project. Lets see an example :

Suppose you watch One Piece : Episode 1 in this site.

You have authenticated your MyAnimeList account with your account on this site.

Now the site will make a request on behalf of you to update the Anime entry in MyAnimeList.

MyAnimeList profile shows that you have watched Episode 1.

Aha yeah, I understand. Basically a built-in episode tracker.

Yea I think we need to discuss this stuff. So currently the site works like this.

Scrape everything from jikan.moe

Seed the database using MAL_Scraper

Make mal_id the primary key. Which means, the mal ids are mapped to this project. https://myanimelist.net/anime/1/ -> http://coreproject.com/api/v1/anime/1/. Note that the id ( 1 in this case ) stays the same. Which means we map animes from MAL in a 1:1 fashion. I dont think its a good design nor a bad one. If we were to use other provider we need to make our own numbering system. Which might make people a bit more confused.

But my end goal is to use one site to update MyAnimeList, Kitsu, Anilist, ( add more trackers ) accounts. For that to be the case we need to map everything to our own system. Which is a bit more complex ( we need to scrape the API from all of these providers and then make some sort of foreignkey mapping ).

I see, I see. I don't understand much of the internal workings, but basically we're mapping the anime ids directly from MAL. Also, from what I know of, this will make integrating with MAL-sync much easier too, probably.

Okay then :) But i was asking to add a trailer / video ( for animes that have it ) option.

Oh sorry, seems I didn't read that part. Sure, I'll design it while keeping that in mind.

I also have a small favor to ask you :). Make a hard fork of this project in your repo and keep it private :) . In the event of a DMCA takedown, we will have another copy of this project

Sure thing! I'll do that right now, and also, (try to) keep regular offline backups, just in case. EDIT: Seems like I cannot change visibility of a fork; do you know any workarounds?

About the Home Page part, here's how it should work: https://www.figma.com/proto/knyOkHUChnJpsAsmuILhOk/Core-Project?page-id=0%3A1&node-id=80%3A7&viewport=241%2C48%2C0.32&scaling=scale-down&starting-point-node-id=76%3A5.
Basically, a carousel with [n] slides, that switches to the next slides after [set time], but also be navigated through the left/right buttons. The slide fields are for: 1-2 Featured, 1-2 Continue Watching & 1-2 random (we can decide on the numbers later on).

That's just the top part for 1280x720 or greater screens. The 4th mockup is the whole look of the Home Page in vertical format (so far unfinished). I'll make modifications for other screen sizes, etc later on. Mobile soon too ^^

I'll update the Figma file with the font info too.

Thanks for reading!

baseplate-admin · 2022-03-29T01:08:55Z

Seems like I cannot change visibility of a fork; do you know any workarounds?

What i meant by hard fork is :

Create your own private repo. But dont name it CoreProject. ( Something like https://github.com/AKindWorld/sadasfas Maybe ? )
Download this repo.
Push codes from this repo to your own repo. ( this might feel like a chore. but hey at least it works )

About the Home Page part, here's how it should work: https://www.figma.com/proto/knyOkHUChnJpsAsmuILhOk/Core-Project?page-id=0%3A1&node-id=80%3A7&viewport=241%2C48%2C0.32&scaling=scale-down&starting-point-node-id=76%3A5.

The site is looking good. But do you know which javascript slider do they use? It seems like i can try to recreate it using Swiper but i cant make it exactly like that without some tweaking.

Sure thing! I'll do that right now, and also, (try to) keep regular offline backups,

I DMed this repo ( in .7z ) to some of my friends in discord. Rest assured that this repo wont go down completely :D

But i am sorry to say that i cannot work like i used to for this project. Like i will push updates but feature releases will be slow for a couple of months ( exams sigh ) But dont think i will be leaving this project, i will contribute when i have some gaps in studies. ( in the mean time can you watch over this project? You have write permissions :D )

Thanks for reading. Have a good day :D

baseplate-admin · 2022-03-29T01:12:08Z

For now my main goal is to add Next.JS and do some bootstrapping. Expect it to arrive in 1-2 days :)

But if i dont get much response on react side, i am gonna go with either vue or svelte. By using svelte, i can scrape much of the codes of V2.

Thoughts @AKindWorld?

AKindWorld · 2022-03-29T06:44:13Z

Yup alrighty! I've finished making a hard-fork of the repo. I actually chose sadasfas as the name cuz it was interestingly funny xD.

If you want to, I can add you a collaborator too.

But i am sorry to say that i cannot work like i used to for this project. Like i will push updates but feature releases will be slow for a couple of months ( exams sigh ) But dont think i will be leaving this project, i will contribute when i have some gaps in studies. ( in the mean time can you watch over this project? You have write permissions :D )

Sure thing! Don't worry, I'll keep watch. Good luck for your exams; if it comforts you any bit, I hate exams and the traditional modes of education too. It's very much useless and exists only to weed out people rather than give everyone a unique purpose for living. True talents aren't recognized, and instead people are motivated to become machines that memorize for a short time. But, well... sigh

For now my main goal is to add Next.JS and do some bootstrapping. Expect it to arrive in 1-2 days :)
But if i dont get much response on react side, i am gonna go with either vue or svelte. By using svelte, i can scrape much of the codes of V2.

Yup, I think that's okay. Also, I'm not much knowledgeable in these stuff, but do you think we can create an app-like feel? I think svelte does that natively, but as I said, I'm not too sure about it. A good example of the type I'm talking about is paimon.moe. An app-like feel is also a great part about the UX, and also we can easily make it a PWA and it'll still feel like a specific-platform app. (paimon.moe uses Sapper, which I think is part of Svelte)

Sorry for the delay in replying! Wish you a great time ahead!

baseplate-admin · 2022-03-29T07:01:04Z

Sapper is deprecated.

The successor is svelte-kit which is what V2 is based on. This project served as a purpose to learn svelte. As someone who wants to learn something new i found svelte really easy. But that makes the cat and mouse problem. Because there are not many svelte developers there are not many 3rd party libraries and because there are not many 3rd party libraries there are not many developers.

Yup alrighty! I've finished making a hard-fork of the repo.

Yay!! Congratulations. This will make the repo a bit more safe :)

I actually chose sadasfas as the name cuz it was interestingly funny xD.

I picked sadasfas because DMCA bloodhounds look through the collaborators repo and check if an exact match is found. So if this repo is DMCA'ed and you have a Repo at https://github.com/akindWorld/coreProject it will be DMCA'ed too. But thats why i told you to pick a funny name XD. So that they can never find the exact repo....

If you want to, I can add you a collaborator too.

Umm that will make finding the repo easy. So for now i would have to turn down the offer 😢 . ( Maybe someday i will have a second github account and we can see then 😃 )

(paimon.moe uses Sapper, which I think is part of Svelte)

Sapper is a framework based on Svelte. Like how django-rest-framework is a framework based on django. next.js is a framework based on react.

Also, I'm not much knowledgeable in these stuff, but do you think we can create an app-like feel?

I plan on making an app someday. Most of my friends said an app makes life a lot easier. So in that sense we have 2 considerations.

HTML latency. ( As someone who lives in the south-eastern part of this world, US latency is over 200ms )
SSR ( Server Side Rendering ) ( Not all mobiles are powerful enough to process the amount of data some page might produce. To make it render on client side will make the First Context Paint very slow ) ( But is doable )

Even with these problems i would like to go for a App like feel :) With PWA.

True talents aren't recognized

In my country people think i cant code a website.... xD

I hate exams and the traditional modes of education too. It's very much useless and exists only to weed out people rather than give everyone a unique purpose for living.

Truer words were never spoken

Good luck for your exams; if it comforts you any bit, I hate exams and the traditional modes of education too.

Thanks!!! It does comfort me. Knowing that someone else thinks the same.

Thanks for reading.

Steven-Ha-88 · 2022-03-31T02:02:35Z

Sorry for the late reply!

Can we write the project in typescript ? ( I really want to write it in typescript )

Yes we can, TypeScript will be better in the long run

Are you familiar with sass ?

Yes

Are you familiar with CSS-in-JS libraries

Yes, Styled-Components

Are you familiar with jikan.moe api ?

Haven't used this api yet but I'm pretty sure I can consume it :) I shall look at the docs soon.

Are you familiar with django and django-rest-framework ? ( this is not a requirement but makes life easier )

Not familiar with django unfortunately, but I could learn on the way.

Are you familiar with JWT token auth ? We are using [djangorestframework-simplejwt]
(https://github.com/jazzband/djangorestframework-simplejwt) for token generation.

Yes

Are you familiar with a UI library ? ( Tailwind maybe ? )

Yes. Tailwind, Bootstrap, SemanticUI, Materialize... you name it!

Are you familiar with Next.js ? If so how is the upgrade path for Next.js. Because with create-react-app and react-router soundcore is very hard to upgrade to latest version without major refactors. ( i am talking 1 - 2 weeks of refractoring and since i wrote it when i was young the code is very messy to read/write )

The upgrade path for NextJS is fairly simple and easy to use. I don't think migrating from CRA to NextJS will be difficult especially for this project. I don't know how big of a project SoundCore is but migrating with messy code is a pain! what I would do is start a new project along with NextJS, installing the right dependencies and updating the code as you migrate to make it look clean and organised. This way you will run into less bugs and have more control.

Check this out

Do we plan on using a library like redux with redux-toolkit ? ( Which i don't think has a need for this project. Because react-query does things faster/easier. )

I have not used react-query as of yet but I have read the docs and familiar with the code. It is very similar to Apollo which is used for GraphQL APIS. Since we are using jikan.moe, react-query should be great.

What animation library do we plan on using ? ( personally i like animejs )

I can work with animejs

Do we need GraphQL ? ( I am against this. Django with GraphQL is a pain to get working and this will need a major backend change. )

I don't think we need GraphQL.

Do we need SSR or are we going with SSG ? ( I prefer SSG over SSR )

Probably SSG but what's great about NextJS is that we could choose which pre-rendering form we'd like to use for each page. We can create a "hybrid" Next.js app by using Static Generation for most pages and using Server-side Rendering for others.

I shall wait for the designs to be finalised. Feel free to ask for my opinion on UI designs.

baseplate-admin · 2022-03-31T03:48:21Z

Hi, @Steven-Ha-88

Yes. Tailwind, Bootstrap, SemanticUI, Materialize... you name it!

How about bulma? xD joking ( we dont need bulma ). You are probably more experienced in Frontend than me. ( which is really awesome )

Are you familiar with jikan.moe api ?

Haven't used this api yet but I'm pretty sure I can consume it :) I shall look at the docs soon.

So our backend API is sourced from jikan.moe ( Take a look here for JSON output )

Not familiar with django unfortunately, but I could learn on the way.

Although i used Django for this project. I would love to rewrite it in some new framework. ( Check this for some more context ) I hate the way how django handles stuff. ( maybe you can suggest a framework? )

I don't know how big of a project SoundCore is

but migrating with messy code is a pain

I dont know how this and this works anymore

I would do is start a new project along with NextJS, installing the right dependencies and updating the code as you migrate to make it look clean and organised. This way you will run into less bugs and have more control.

I agree with this. But i have questions. Do we need some testing ?

Probably SSG but what's great about NextJS is that we could choose which pre-rendering form we'd like to use for each page. We can create a "hybrid" Next.js app by using Static Generation for most pages and using Server-side Rendering for others.

While it would be a good thing but i am curious of how much requests per second can it handle ?

Feel free to ask for my opinion on UI designs.

Take a look at #115 ( do you think we can use Tailwind for this? ) and #114 ( though #114 is not UI design related its still a good place to discuss Libraries ) :)

Also before you start working are you comfortable with the LICENSE?

Thanks for reading :) Have a good day..

baseplate-admin · 2022-04-03T02:28:27Z

I will be doing the ui part :)

I am closing this issue now :)

baseplate-admin · 2022-04-03T03:48:50Z

Hey @Steven-Ha-88,

I have decided that i will use svelte again for this project.

I tried to use next.js ( the home page was written using next.js till this part )

My problems with next.js :

The React UI library is overly complicated compared to Svelte.
I can't access class name directly without using useRef()
I can't seem to get postcss.config.js working correctly.
I can't seem to get a store that does work in background. redux-toolkit can do it but at that point is it really easy ? ( take a look at my svelte implementation )
I used bulma and it is not playing nicely. ( Purgecss seems to do fancy stuff during development )
The next.js docs is really outdated compared to svelte's interactive docs.
next.js animations are a joke compared to svelte/transitions ( next.js doesn't have any transitions | well react actually doesn't but that makes react inferior compared to svelte )
next.js can't export to SSG after using next/images ( Is this really something they should do ? If so then dont throw an error if i use <img /> tag )

Overall react seems overly complicated to me after using svelte. Thats why i am gonna go with svelte on this project. Overall as a college student i am learning stuff. If i am writing boilerplate/configuring stuff for 90% of the time then thats not a good sign. You are welcome to contribute on this project if you want to. Thanks for understanding :) !!!

I rewrote the project in both next.js and svelte. See the difference for yourself.

Next.js : https://coreproject-ansjpra50-baseplate-admin.vercel.app
Svelte : https://coreproject-l5s4ixpk8-baseplate-admin.vercel.app/

baseplate-admin added enhancement New feature or request help wanted Extra attention is needed good first issue Good for newcomers question Further information is requested labels Mar 26, 2022

baseplate-admin pinned this issue Mar 26, 2022

baseplate-admin mentioned this issue Mar 26, 2022

Project needs a logo. #101

Closed

baseplate-admin mentioned this issue Mar 28, 2022

New Frontend #114

Closed

AKindWorld mentioned this issue Mar 28, 2022

Home Page UI Redesign #115

Closed

baseplate-admin assigned AKindWorld Mar 30, 2022

baseplate-admin closed this as completed Apr 3, 2022

baseplate-admin unpinned this issue Apr 3, 2022

baseplate-admin self-assigned this Apr 3, 2022

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Redesign the UI #110

Redesign the UI #110

baseplate-admin commented Mar 26, 2022 •

edited

Loading

baseplate-admin commented Mar 26, 2022

baseplate-admin commented Mar 26, 2022 •

edited

Loading

baseplate-admin commented Mar 26, 2022 •

edited

Loading

AKindWorld commented Mar 26, 2022

baseplate-admin commented Mar 26, 2022 •

edited

Loading

AKindWorld commented Mar 26, 2022

baseplate-admin commented Mar 26, 2022 •

edited

Loading

baseplate-admin commented Mar 26, 2022 •

edited

Loading

Steven-Ha-88 commented Mar 27, 2022

baseplate-admin commented Mar 27, 2022 •

edited

Loading

baseplate-admin commented Mar 27, 2022 •

edited

Loading

AKindWorld commented Mar 27, 2022

baseplate-admin commented Mar 27, 2022 •

edited

Loading

AKindWorld commented Mar 27, 2022

baseplate-admin commented Mar 27, 2022 •

edited

Loading

baseplate-admin commented Mar 27, 2022 •

edited

Loading

AKindWorld commented Mar 28, 2022

baseplate-admin commented Mar 28, 2022 •

edited

Loading

AKindWorld commented Mar 28, 2022 •

edited

Loading

baseplate-admin commented Mar 29, 2022 •

edited

Loading

baseplate-admin commented Mar 29, 2022 •

edited

Loading

AKindWorld commented Mar 29, 2022

baseplate-admin commented Mar 29, 2022 •

edited

Loading

Steven-Ha-88 commented Mar 31, 2022

baseplate-admin commented Mar 31, 2022 •

edited

Loading

baseplate-admin commented Apr 3, 2022

baseplate-admin commented Apr 3, 2022 •

edited

Loading

Redesign the UI #110

Redesign the UI #110

Comments

baseplate-admin commented Mar 26, 2022 • edited Loading

baseplate-admin commented Mar 26, 2022

baseplate-admin commented Mar 26, 2022 • edited Loading

baseplate-admin commented Mar 26, 2022 • edited Loading

AKindWorld commented Mar 26, 2022

baseplate-admin commented Mar 26, 2022 • edited Loading

AKindWorld commented Mar 26, 2022

baseplate-admin commented Mar 26, 2022 • edited Loading

baseplate-admin commented Mar 26, 2022 • edited Loading

I have a small question. Is it possible to make this a shade of blue purple instead of white ? ( feel free to disagree )

Popup seems### Would you please work on this too ? ( feel free to disagree )

This with some animations would be a good loading spinner ( while we fetch data, we can show a placeholder )

I like this logo :) Lets go with it :D

Also since we are starting from scratch dont be afraid to do experiments. If you think in future another design seems good to you dont be afraid to ask. Because as long as the backend is not changing, frontend tooling with a UI library is not much work.

Steven-Ha-88 commented Mar 27, 2022

baseplate-admin commented Mar 27, 2022 • edited Loading

baseplate-admin commented Mar 27, 2022 • edited Loading

AKindWorld commented Mar 27, 2022

baseplate-admin commented Mar 27, 2022 • edited Loading

AKindWorld commented Mar 27, 2022

baseplate-admin commented Mar 27, 2022 • edited Loading

Lets take a look at what our api can return :

Now we can make this part based on all these info :)

I like your design :) Lets go with it :)

Do you think we can make it a bit more fancy ?

A small question

I have another question. Is the font open source / downloadable ? Because i cant seem to find the OTF file for it.

baseplate-admin commented Mar 27, 2022 • edited Loading

AKindWorld commented Mar 28, 2022

baseplate-admin commented Mar 28, 2022 • edited Loading

AKindWorld commented Mar 28, 2022 • edited Loading

baseplate-admin commented Mar 29, 2022 • edited Loading

baseplate-admin commented Mar 29, 2022 • edited Loading

AKindWorld commented Mar 29, 2022

baseplate-admin commented Mar 29, 2022 • edited Loading

Steven-Ha-88 commented Mar 31, 2022

baseplate-admin commented Mar 31, 2022 • edited Loading

baseplate-admin commented Apr 3, 2022

baseplate-admin commented Apr 3, 2022 • edited Loading

baseplate-admin commented Mar 26, 2022 •

edited

Loading

baseplate-admin commented Mar 26, 2022 •

edited

Loading

baseplate-admin commented Mar 26, 2022 •

edited

Loading

baseplate-admin commented Mar 26, 2022 •

edited

Loading

baseplate-admin commented Mar 26, 2022 •

edited

Loading

baseplate-admin commented Mar 26, 2022 •

edited

Loading

baseplate-admin commented Mar 27, 2022 •

edited

Loading

baseplate-admin commented Mar 27, 2022 •

edited

Loading

baseplate-admin commented Mar 27, 2022 •

edited

Loading

baseplate-admin commented Mar 27, 2022 •

edited

Loading

baseplate-admin commented Mar 27, 2022 •

edited

Loading

baseplate-admin commented Mar 28, 2022 •

edited

Loading

AKindWorld commented Mar 28, 2022 •

edited

Loading

baseplate-admin commented Mar 29, 2022 •

edited

Loading

baseplate-admin commented Mar 29, 2022 •

edited

Loading

baseplate-admin commented Mar 29, 2022 •

edited

Loading

baseplate-admin commented Mar 31, 2022 •

edited

Loading

baseplate-admin commented Apr 3, 2022 •

edited

Loading