Create CineSimile Homepage

[Niweera]

CineSimile Homepage

The following is how the CineSimile homepage should be looked like. Keep in mind this is just a suggestion.

Since we use Carbon Design System and React, we can easily create a single component and integrate them later. The following would be the suggested list of components. If you would like to work on a component and create a pull request, please mention that in the comments. Also, if you want to suggest a new component, please mention that in the comment too.

• [ ] Navbar [@MukulTan10]
• [ ] Introduction Component [@shravani05]
• [ ] Search box [@jpalacio0612]
• [ ] Search results title [@MilePaor]
• [ ] Results movie card [@VinuriBandara]
• [ ] Footer [@utkarsh4321]

Important

When sending a pull request, please remember to add a screenshot of the development of your selected component. In that case, it is easy for others to get inspired too 😁.

[VinuriBandara]

I would like to contribute @Niweera 😊

[Niweera]

@VinuriBandara you can select a component that you want to develop and mention it here. I will assign you to that component development.

[VinuriBandara]

I would like to work on the results movie cards @Niweera

[shravani05]

I would like to work on the Introduction Component @Niweera

[Niweera]

Thanks, @VinuriBandara, we'll assign you to results movie component development. Thanks, @shravani05, we'll assign you to the Introduction component development. If you have any questions regarding the development, do not hesitate to ask. 😎 Thanks for contributing to CineSimile. Happy Hacktoberfest! 😁

[utkarsh4321]

Hii @Niweera i wanna to work on footer part.

[Niweera]

@utkarsh4321 I have assigned you to the task of developing the Footer.

[MukulTan10]

hey i would like to work on navbar

[Niweera]

@MukulTan10, sure I'll assign you to the task.

[shravani05]

I have made the PR with the necessary requirements for the Introduction Component of the Home page.

[jpalacio0612]

Hello.

My name is Jonathan. I am a FullStack Mern Developer,I would like to contribute, I was doing some tests with the part of the search bar, This is what I achieved:

I created a search box component with a functional approach using hooks like useState and useDebouncedCallback to handle bouncing when written to input. And to simulate the calls to the API I did a mockdata and a simple logic to filter.

Stay tuned if it's okay to make a pull request

const SearchBox = () => {
  const [query, setQuery] = useState([]);

  const debounced = useDebouncedCallback((value, setQuery) => {
    let array = [];
    if (value) {
      for (let movie of mockMovies) {
        if (movie.title.toLowerCase().startsWith(value)) {
          array.push(movie);
        }
      }
    }
    setQuery(array);
  }, 500);

  return (
    <div className="searchBox">
      <Search
        onChange={(e) => debounced.callback(e.target.value, setQuery)}
        id="search-1"
        placeHolderText="Search a movie"
      />
      {query.map((movie) => (
        <div key={movie.id}>
          <h1>{movie.title}</h1>
        </div>
      ))}
    </div>
  );
};

[Niweera]

@jpalacio0612 very nice. If you want I can assign you to the issue. Please let me know.

[jpalacio0612]

@Niweera Yes, please assign me the task and let me know if I should add something else to it before doing the pull request.

[Niweera]

@jpalacio0612 you can send the pull request. Once it merges I think @utkarsh4321 can take a look and do any improvements as they see fit.

[kots14]

Is there any API for filling the auto complete? I see that currently there's dummy data. If there's a scope to contribute for the auto complete feature for the movie search, be it front end or back end, I'd like to work on it.

[Niweera]

Is there any API for filling the auto complete? I see that currently there's dummy data. If there's a scope to contribute for the auto complete feature for the movie search, be it front end or back end, I'd like to work on it.

The back-end API is currently under development and we haven't started it. Currently, we are focused on front-end development right now.

[bojanmiles]

@Niweera i would like to contribute for component called "Search results title"

[Niweera]

@MilePaor sure you can. I'll assign you to it. (Remember to sync your fork using $ git pull upstream master command.)

[senshiii]

Hi @Niweera . I just forked and cloned the repo and came to see two links in the Navbar [ News, Contact Us ] . I want to contribute. I can work on News using an API from RapiApi or I can also do the contact form. Whichever you assign.

[Niweera]

Hi @Niweera . I just forked and cloned the repo and came to see two links in the Navbar [ News, Contact Us ] . I want to contribute. I can work on News using an API from RapiApi or I can also do the contact form. Whichever you assign.

You can choose anything you like, if you prefer you can do the API implement with RapidAPI. I'll assign you.

[senshiii]

Yeah sure. I'll do it then.