Next.js Site with Sanity.io (Headless CMS), styled with SCSS

Community feedback

• 

  Jay•695

  @Junjiequan

  Posted over 3 years ago

  I have used redux, redux-tookilt and redux-thunk for my previous projects.

  For me, redux only get complicate when the architecture is not planned thoroughly. In other words, when you are going to use redux it is better to have clear understanding regards to how many state changing activities is need to be included.

  The initial step for setting up redux logic is the most difficult & complicated part for me not the code itself make the process complicate. Once the initial setup is done, it makes the whole process much more effective and easy to maintain with useSelector and useDispatch hook, you can always add additional reducers & actions effortlessly.

  Lastly, I strongly recommend to tryout redux-thunk. It is a middleware that allows to return a function. Its really usefull when your project is required to interact with server-side, e.g., you could use it to GET data from API and use returned data to dispatch actions, example code below:

  export const fetchPosts = () => axios.get(http://localhost:5000/posts);
  
  export const fetchAllPosts = async (dispatch: AppDispatch) => {
    try {
      const { data } = await fetchPosts();
      dispatch({ type: "FETCH_ALL", payload: data });
    } catch (err: any) {
      console.log(err.message);
    }
  };
  

  This is just my opinion, I wouldn't consider too much about time spend on a project when I am learning. The more time you spend usually means the more you considerate about the project. For me, it is harder to create good quality project with more time than creepy quality with less time, eye on details require a lot of patient and extra efforts.

  Hope this feedback helps.

  01

  Marked as helpful
• 

  Shivam•520

  @shivjoshi1996

  Posted over 3 years ago

  Hey @JamesTheLessFC, great job on this.

  To respond to a couple of your points:

  1. I've been a Project Manager for a few years working in Software Eng teams and in my experience, I think for someone who is a Junior F/E, 2 and a half weeks is reasonable for this kind of site considering you were working on it part-time. Obviously, if you had a solid 8-hours a day you might've got this done faster, and as you're still learning, the efficiency of how fast you write your code will only increase going forward. So I think in terms of how fast you're getting things done, you're on the right track.

  2. I can't give you a solid answer on the images in terms of best practices (since I'm also learning Sanity & NextJS) but I know Sanity has some special helpers for images (https://www.sanity.io/docs/presenting-images), and there is also a plugin for Sanity + Next specifically. Hopefully that points you in the right direction.

  3. From my personal experience Sanity is pretty great (It's the one I've also used the most while developing since it's the most straight forward IMO). For the content, Sanity would work fine. In a real-life situation, you'll probably be asked to hook the shop up to something like Shopify which can handle things like invoices, order tracking, etc. So while you'll still be able to use Sanity for the content (e.g. page content, product descriptions, images) I assume the actual product management will be handled in another system. That's way beyond the scope of this project though so don't worry too much about that! Some other headless CMS' I've used in my real-life role is Prismic (https://prismic.io/) and Contentful (https://www.contentful.com/) but these are mostly for static sites and not for an eCommerce store. I think if you try a couple of them out, the rest should be somewhat similar.

  4. From what I've read, the React Context API can be used for most cases rather than Redux which has known to be needlessly complex. For a relatively small project like this, I think Context is perfect.

  Great job overall!

  01

  Marked as helpful